styling bootstrap-vue dropdown button

Question

I have this dropdown menu with bootstrap-vue in my nuxtjs app:

<div>
  <b-dropdown class="dropdown" id="dropdown-1" text="Dropdown Button" class="m-md-2">
    <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 active>Active action</b-dropdown-item>
    <b-dropdown-item disabled>Disabled action</b-dropdown-item>
  </b-dropdown>
</div>

I want to be able to change the border and background color of my dropdown button through this code:

<style scoped>
  .dropdown {
    border: solid 0px;
    background: white;
  }
</style>

Please note that the style MUST be scoped. What am I doing wrong and how can I change style of my dropdown button?

Did you check in your browser to see which styles are being applied and from where? — bassxzero
– bassxzero, Commented Mar 24, 2021 at 5:28
Yes so on the browser there is a <button> child to class="dropdown" that has the styling and it can be modified through browser but I dunno how I can reach and modify it through my code! — seyet
– seyet, Commented Mar 24, 2021 at 15:38

Mike · Accepted Answer · 2021-03-25 01:19:59Z

4

You can use toggle-class to assign a scoped CSS class to your dropdown toggle button and variant='none' to disable the default variant in effect when the toggle button is clicked.

Template

<b-dropdown toggle-class='customDropdown' variant='none' class="m-md-2" id="dropdown-1" text="Dropdown Button">
  <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 active>Active action</b-dropdown-item>
    <b-dropdown-item disabled>Disabled action</b-dropdown-item>
</b-dropdown>

CSS

<style scoped>
  .customDropdown {
    border: 3px dashed cyan;
    background-color: purple;
  }
</style>

Sample result:

answered Mar 25, 2021 at 1:19

Mike

8151 gold badge7 silver badges15 bronze badges

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

1 Comment

rubebop Over a year ago

Wonderful! You pointed me in the write direction: setting variant='none' was key for solving my (exact same) issue. In my case, I was also working with a scoped style: no need to go for the toggle-class, a simple class did the job perfectly.

Collectives™ on Stack Overflow

styling bootstrap-vue dropdown button

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related