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-card no-body class="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-card no-body>
  <b-tabs card>
    <b-tab title="Tab 1" active title-item-class="w-50">
      Tab Contents 1
    </b-tab>
    <b-tab title="Tab 2" title-item-class="w-50">
      Tab Contents 2
    </b-tab>
  </b-tabs>
</b-card>