title: How to align bootstrap-vue dropdown button items around
body: <p>How to align dropdown button child items horizontally around. i couldn't manage to customize it through CSS. control link is <a href="https://bootstrap-vue.js.org/docs/components/dropdown" rel="nofollow noreferrer">here</a></p>
  
  <p><a href="https://jsfiddle.net/ravanand1988/eywraw8t/405082/" rel="nofollow noreferrer">Js Fiddle sample is here</a></p>
  
  <p>expected design:</p>
  
  <p><a href="https://i.stack.imgur.com/TAo7p.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TAo7p.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    new Vue({
    el: '#app',
   
  data:{
         
           fruits: ['Apple', 'Banana', 'Orange'],
           selectedFruit: '',
         
       },
       methods: {
      selectFruit (index) {
        this.selectedFruit = this.fruits[index]
          }
        }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>   
  
   .dropdown-demo {
    width: 200px;
    background-color: white;
    border-bottom: solid 1px black;
    &gt;div {
      background-color: azure;
      width: 100%;
      button {
        background-color: yellow !important;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        text-align: right
      }
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"&gt;&lt;/script&gt;
  &lt;link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/&gt;
  
  &lt;script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"&gt;&lt;/script&gt;
  &lt;script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"&gt;&lt;/script&gt;
  &lt;div id="app"&gt;
           &lt;div class="dropdown-demo"&gt;
              &lt;b-dropdown variant="link" size="lg" no-caret&gt;
                &lt;template slot="button-content"&gt;
                  &lt;span&gt;Fruits:&lt;/span&gt;
                  &lt;span&gt; {{selectedFruit}}&lt;/span&gt;
                  &amp;#x1f50d;&lt;span class="sr-only"&gt;Search&lt;/span&gt;
                &lt;/template&gt;
                &lt;b-dd-item v-for="(item, id) in fruits"
                           @click="selectFruit(id)"
                           :key="id"&gt;
                  {{item}}
                &lt;/b-dd-item&gt;
              &lt;/b-dropdown&gt;
            &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>