Rendering custom styles in bootstrap-vue

Question

I'm trying to add some custom styles to a dropdown menu component which uses Bootstrap-Vue. I'm using the documentation here.

Here is my template:

<div class="container">
  <b-dropdown id="dropdownMenuButton" text="Dropdown Button" no-caret class="custom-dropdown">
    <b-dropdown-item>First Action</b-dropdown-item>
    <b-dropdown-item>Second Action</b-dropdown-item>
    <b-dropdown-item>Third Action</b-dropdown-item>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item>Something else here...</b-dropdown-item>
    <b-dropdown-item disabled>Disabled action</b-dropdown-item>
  </b-dropdown>
</div>

I'm finding that I can style #dropdownMenuButton, but when the dropdown renders in the browser it creates a element inside of #dropdownMenuButton and I can't style that. I've tried doing so like this:

<style scoped>
  #dropdownMenuButton > button {
    width: 100%;
  }

  #dropdownMenuButton__BV_toggle_ {
    width: 100%;
  }
</style>

But no luck. FYI the id of the button that gets created is dropdownMenuButton__BV_toggle_.

maybe you can look this: https://stackoverflow.com/questions/48699688/bootstrap-vue-change-dropdown-background — Diego Avila, Jun 08 '18 at 14:54

score 13 · Accepted Answer · answered Jun 08 '18 at 14:52

13

This is beacause you are making the styles scoped to the component and since bootstrap vue dropdown is another component you wont be able to do this with scoped styles.

https://vue-loader.vuejs.org/guide/scoped-css.html

Try removing the scoped attribute like this.

<style>
  #dropdownMenuButton > button {
    width: 100%;
  }

  #dropdownMenuButton__BV_toggle_ {
    width: 100%;
  }
</style>

answered Jun 08 '18 at 14:52

Maantje

1,651
1
15
31

Thank you, that worked!! Also, of the two different ways to select the button element, is there a preferred method (the parent/child style vs the id of the element)? The id doesn't show up in my template (it's created by bootstrap-vue) so I'm reluctant to reference it. – sandramedina Jun 10 '18 at 02:30

score 10 · Answer 2 · answered Aug 12 '19 at 12:27

10

You can also use the /deep/ keyword to just affect child components, if you don't want to clutter global styles:

<style scoped>
  /deep/ #dropdownMenuButton > button {
    width: 100%;
  }

  /deep/ #dropdownMenuButton__BV_toggle_ {
    width: 100%;
  }
</style>

answered Aug 12 '19 at 12:27

Randomtheories

1,052
16
22

+1 you crazy, i have spent almost 2hours and got a bonce of frustation, finally /deep/ working fine @randy... thanks you... – RGKrish183 Apr 16 '20 at 11:43

Rendering custom styles in bootstrap-vue

2 Answers2