title: Aligning close icon in Bootstrap 4 tab
body: <p>I'm trying to align a close icon for a <code>BootstrapVue</code> tab with Bootstrap 4.2 in the top right corner.</p>
  
  <pre><code>&lt;b-tab v-for="order in tabs" :key="order.id"&gt;
      &lt;template slot="title"&gt;
          &lt;span class="float-left"&gt;{{ order.name }}&lt;/span&gt;
          &lt;b-button type="button" class="close float-right" aria-label="Close" @click="closeTab(order.id)"&gt;
              &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
          &lt;/b-button&gt;
      &lt;/template&gt;
      ...content....
  &lt;/b-tab&gt;
  </code></pre>
  
  <p>However, not only does it not align right as expected, the tab appears cut off when focussed:</p>
  
  <p><a href="https://i.stack.imgur.com/MtuHr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MtuHr.png" alt="enter image description here"></a></p>
  
  <p>What I want is for that <code>X</code> to appear in the top right corner of the tab.</p>
  
  <p>How do I do that and make the tab look normal when active?</p>