BootstrapVue — Customizing Tabs

To make good looking Vue apps we need to style our components. To make our lives easier, we can use components with styles built-in. Let’s look at how to customize the tabs that we added.

Vertical Tabs

We can make tabs vertical with the vertical prop:

<template>
  <div id="app">
    <b-card no-body>
      <b-tabs pills card vertical>
        <b-tab title="Tab 1" active>
          <b-card-text>Tab 1</b-card-text>
        </b-tab>
        <b-tab title="Tab 2">
          <b-card-text>Tab 2</b-card-text>
        </b-tab>
      </b-tabs>
    </b-card>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

By default, the controls are rendered on the left.

We can place vertical tab controls on the right with the end prop:

<template>
  <div id="app">
    <b-card no-body>
      <b-tabs pills card vertical end>
        <b-tab title="Tab 1" active>
          <b-card-text>Tab 1</b-card-text>
        </b-tab>
        <b-tab title="Tab 2">
          <b-card-text>Tab 2</b-card-text>
        </b-tab>
      </b-tabs>
    </b-card>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

We can change the width of the tab controls with utility classes:

<template>
  <div id="app">
    <b-card no-body>
      <b-tabs pills card vertical nav-wrapper-class="w-75">
        <b-tab title="Tab 1" active>
          <b-card-text>Tab 1</b-card-text>
        </b-tab>
        <b-tab title="Tab 2">
          <b-card-text>Tab 2</b-card-text>
        </b-tab>
      </b-tabs>
    </b-card>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

The w-75 class makes the controls take up 3/4 of the width of the card.

Active Classes

We can change the active classes by passing in some props.

active-nav-item-class lets us set the class for an active item.

active-tab-class lets us set the class for the active tab content.

content-class lets us set the class for the displayed content.

For example, we can write:

<template>
  <div id="app">
    <b-card no-body>
      <b-tabs
        active-nav-item-class="font-weight-bold"
        active-tab-class="text-success"
        content-class="mt-3"
      >
        <b-tab title="Tab 1" active>
          <b-card-text>Tab 1</b-card-text>
        </b-tab>
        <b-tab title="Tab 2">
          <b-card-text>Tab 2</b-card-text>
        </b-tab>
      </b-tabs>
    </b-card>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

We set active-nav-item-class to font-weight-bold so the control text for the active tab is bold.

active-tab-class is set to text-success , so the content text for the active tab is green.

content-class is set to mt-3 so that we have some margins on top.

Disable Fade

We can add the no-fade prop to disable fade transitions.

Tabs Without Content

We can add tabs without content by populating the tabs-end or tabs-start slot. The tabs without content will be added to the end or start respectively.

For example, we can write:

<template>
  <div id="app">
    <b-tabs>
      <b-tab title="Tab 1" active>
        <b-card-text>Tab 1</b-card-text>
      </b-tab>
      <b-tab title="Tab 2">
        <b-card-text>Tab 2</b-card-text>
      </b-tab>

      <template v-slot:tabs-end>
        <b-nav-item href="#" role="presentation" @click="() => {}">Empty 1</b-nav-item>
        <li class="nav-item align-self-center">Empty 2</li>
      </template>
    </b-tabs>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Now we have the Empty 1 and Empty 2 tabs that have no content to the right of the other tabs.

Custom Content in Tab Title

We can populate slots to add custom content to them.

To do that, we populate the title slot of each tab.

For example, we can write:

<template>
  <div id="app">
    <b-tabs>
      <b-tab active>
        <template v-slot:title>
          <b-spinner small></b-spinner>
          <b>Tab 1</b>
        </template>
        <p class="p-3">Tab 1</p>
      </b-tab>

      <b-tab>
        <template v-slot:title>Tab 2</template>
        <p class="p-3">Tab 2</p>
      </b-tab>
    </b-tabs>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

We populated the title slot of each tab with our own content.

In the first tab, we added a spinner with text.

In the 2nd tab, we just have text.

Conclusion

We can make tabs vertical or wider than usual. The text of the tabs can also be changed. Tabs also don’t have to have content.