Bootstrap-vue: Feature Request: add ok-class/cancel-class prop to b-modal

Created on 25 May 2018  路  3Comments  路  Source: bootstrap-vue/bootstrap-vue

Currently, b-modal provides modal-class, body-class, header-class, footer-class to customize corresponding element style, but lacks ok-class and cancel-class. Can you add these two props?

In my case, all buttons have btn-flat class in my application, to make it consistent, I would like to add btn-flat to modal's ok and cancel button. Implement a modal-footer slot is just too expensive just for adding a class to those two buttons.

Thanks in advance!

Answered Question

Most helpful comment

If all of your buttons are flat, why not just theme Bootstrap? I sort of disagree with just constantly adding little class helpers everywhere; BV is already a little bloated, and we provide slots to do these things. You can either use CSS, like .modal-footer > .btn, or use the slot, or change your bootstrap theme to be flat if you're using a flat button class everywhere anyway.

All 3 comments

If all of your buttons are flat, why not just theme Bootstrap? I sort of disagree with just constantly adding little class helpers everywhere; BV is already a little bloated, and we provide slots to do these things. You can either use CSS, like .modal-footer > .btn, or use the slot, or change your bootstrap theme to be flat if you're using a flat button class everywhere anyway.

Thank you for the reply! I understand your consideration. btn-flat is just an example, and not a good example on which I agree with you. My initial thought was, since all other parts (model, body, header, footer) already have corresponding $part-class prop, why leave ok and cancel button alone? I'm a backend developer, and happen be to writing an admin site on my own. My knowledge on CSS is very poor, so I try to avoid writing custom style codes. This is also the reason I fired this FR.

Anyway, thanks for your suggestion, it solves my problem. And thanks you for this amazing project, it really makes my life much easier!

Another way:

ok-variant="primary your-custom-class"
cancel-variant="secondary your-custom-class"

Sry for necro.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

chaymag picture chaymag  路  3Comments

ebertti picture ebertti  路  3Comments

KonradDeskiewicz picture KonradDeskiewicz  路  3Comments

meyt picture meyt  路  3Comments

humblecoder picture humblecoder  路  3Comments