b-dropdown is not rendering any css class

Question

I am using bootstrap-vue to add <b-dropdown> components, but the button doesn't have an effect adding any css class.

Is this some bug with bootstrap-vue component or I am doing something wrong while adding a class?

new Vue({
  el: "#vueapp",
  data: function() {
    return {}
  }
})

.btn-circle {
  width: 30px;
  height: 30px;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>


<div id="vueapp" class="vue-app">
  <b-dropdown button-class="btn btn-danger d-flex align-items-center mr-2 justify-content-center rounded-circle btn-circle" no-caret>
    <template v-slot:button-content>
            <i class="fas fa-cog fa-lg"></i>
          </template>
    <b-dropdown-item href="#">An item</b-dropdown-item>
    <b-dropdown-item href="#">Another item</b-dropdown-item>
  </b-dropdown>


  <button class="btn btn-light d-flex align-items-center mr-2 justify-content-center rounded-circle btn-circle ">
          <i class="fas fa-plus-circle fa-lg"></i>
        </button>
</div>

Answer 1

I was using the wrong prop. So, I had to use the toggle-class prop for <b-dropdown>.

So, using the toggle-class solved the problem for me.

new Vue({
  el: "#vueapp",
  data: function() {
    return {}
  }
})

.btn-circle {
  width: 30px;
  height: 30px;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>


<div id="vueapp" class="vue-app">
  <b-dropdown toggle-class="btn btn-danger d-flex align-items-center mr-2 justify-content-center rounded-circle btn-circle" no-caret>
    <template v-slot:button-content>
            <i class="fas fa-cog fa-lg"></i>
          </template>
    <b-dropdown-item href="#">An item</b-dropdown-item>
    <b-dropdown-item href="#">Another item</b-dropdown-item>
  </b-dropdown>


  <button class="btn btn-light d-flex align-items-center mr-2 justify-content-center rounded-circle btn-circle ">
          <i class="fas fa-plus-circle fa-lg"></i>
        </button>
</div>