CODEWITHSUNDEEP
vue.jsbootstrap-vue
Angel
Angel

Reputation: 1009

Bootstrap-vue: Change size of b-dropdown button

We implemented the bootstrap-vue in our application and we used the b-dropdown.

How can we change the button size? we want to change the button size to btn-sm

Below is the code, it didnt change the size of the button

<b-dropdown-item-btn button="btn-sm primary" right id="dropdown-1" class="m-md-2" style="display: inline;">

<i class="fa fa-gear"></i>

<b-form-select v-model="accounting_period_1" :options="accounting_period_options" @change="filterRevenueAndCosts()">
    
</b-form-select>

Question: How can we change the button size?

Upvotes: 0

Views: 1486

Answers (1)

B0BBY
B0BBY

Reputation: 1109

UPDATE: This is how it could look after using b-dropdown with b-dropdown-item - set size to sm and set your class.

Here is how you can achieve that: (I don't think I have to explain what I do)

Like this in your template:

<div>
  <div>
    <b-dropdown size="sm" class="lang-dropdown" no-caret variant="light">
      <b-dropdown-item>
        Item 1
      </b-dropdown-item>
      <b-dropdown-item>
        Item 2
      </b-dropdown-item>
    </b-dropdown>
  </div>
</div>

Like this in your style:

.lang-dropdown .dropdown-menu { //you can also seperate these
   min-width: 4rem; //set your width here
}

Please let me know if this works out for you!

Upvotes: 1

Related Questions