10

I tried to change the background-color in b-modal -> in .modal-header using bootstrap-vue. But the vue doesn't see my styles and I don know why :/ here is the code. I follow by answer in link

HTML:

b-modal(id="card-1" title="CARTÃO DE CRÉDITO"  :modal-class="myclass" header-text-variant="light")

VUE

export default {
    data: {
   myclass: ['myclass']
 },

}

CSS

.myclass > .modal-dialog > .modal-content > .modal-header {
  background-color: #da2228 !important;
  color: white;
}

But I still doesn't see the results. Modal header is white. Any ideas why?

anna
  • 859
  • 2
  • 9
  • 23

2 Answers2

23

You're probably using a scoped style tag in your .vue file. If you are, then you need to use a deep-selector to properly target the subcomponent.

The selectors are /deep/, >>> or ::v-deep. In the below example i use /deep/, but the others should work for you as well.

You can also use the header-class prop on b-modal to directly add the class to the header if you wish.

<template>
  <b-modal header-class="my-class">
    <template #modal-header>Header</template>
    Hello
  </b-modal>

  <b-modal modal-class="my-second-class">
    <template #modal-header>Header</template>
    Hello
  </b-modal>
</template>

<style scoped>
/deep/ .my-class {
  background: black;
  color: white;
}

/deep/ .my-second-class > .modal-dialog > .modal-content > .modal-header {
  background: black;
  color: white;
}
</style>
Hiws
  • 8,230
  • 1
  • 19
  • 36
  • Wow! Thank you. It;s working! I spent many hours on this case, completely paying no attention for this `scope` in css. Than for that. – anna Apr 03 '20 at 08:02
  • A year later and you my friend @Hiws are still a savior!!! – DemiA May 31 '21 at 10:59
3

You can use content-class="your-class" in the vue bootstrap modal.

<b-modal id="myModal" content-class="your-class" title="BootstrapVue">
    Body Content
</b-modal>

Or else it is difficult to style the modal cuz the normal class="" does not apply to the code.

Sudam Dissanayake
  • 136
  • 1
  • 3