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: stackoverflow.com/questions/48699688/… — Diego Avila
– Diego Avila, Commented Jun 8, 2018 at 14:54

Maantje · Accepted Answer · 2018-06-08 14:52:59Z

15

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 8, 2018 at 14:52

Maantje

1,8012 gold badges22 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ara Medina Over a year ago

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.

Randomtheories · Accepted Answer · 2019-08-12 12:27:22Z

12

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, 2019 at 12:27

Randomtheories

1,29019 silver badges23 bronze badges

1 Comment

R.G.Krish Over a year ago

+1 you crazy, i have spent almost 2hours and got a bonce of frustation, finally /deep/ working fine @randy... thanks you...

Collectives™ on Stack Overflow

Rendering custom styles in bootstrap-vue

2 Answers 2

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Linked

Related