I need help aligning a close icon for a BootstrapVue tab with Bootstrap 4.2 in the top right corner. Here is my code:
<b-tab v-for="order in tabs" :key="order.id">
<template slot="title">
<span class="float-left">{{ order.name }}</span>
<b-button type="button" class="close float-right" aria-label="Close" @click="closeTab(order.id)">
<span aria-hidden="true">×</span>
</b-button>
</template>
...content....
</b-tab>
But the alignment is off and the tab gets cut off when active. Here is a screenshot for reference: https://i.sstatic.net/MtuHr.png
I want the X to appear in the top right corner of the tab. How can I achieve this and ensure the tab looks normal when active?