How To Make A Full-width Tab Card In Bootstrap-vue?

I'm having something like this from the Docs in bootstrap-vue: Card with tabs: So how do I manage to design the tabs like this: My current code: <

Solution 1:

You could add the following simple CSS rules and add full-width class to b-card:

<b-cardno-bodyclass="full-width">
        ...   
.full-width.card-header-tabs {
       margin-right:-21px;margin-left:-21px;
    }

   .full-width.nav-tabs.nav-item {
       margin-bottom:-1px;flex-grow:1;text-align:center;
   }

and everything will be done

check this codesandbox code

Solution 2:

You can use title-item-class="w-50" to make each tap title occupies 50% width

<b-cardno-body><b-tabscard><b-tabtitle="Tab 1"activetitle-item-class="w-50">
      Tab Contents 1
    </b-tab><b-tabtitle="Tab 2"title-item-class="w-50">
      Tab Contents 2
    </b-tab></b-tabs></b-card>