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.

We look at how to customize the tabs that we added, including how to navigate tabs with code via v-model and refs methods.

Add Custom Classes to nav-tab or Pills

We can set our own class with the title-link-class prop.

For example, we can write:

<template>
  <div id="app">
    <b-tabs>
      <b-tab title="Tab 1" title-link-class="tab">Tab 1</b-tab>
      <b-tab title="Tab 2" title-link-class="tab">Tab 2</b-tab>      
    </b-tabs>
  </div>
</template>
<script>
export default {
  name: "App"  
};
</script>
<style>
.tab {
  color: red
}
</style>

We added the tab class, which we set as the value of title-link-class .

Because of the class’s style, we’ll see that the nav text is red when we hover over it.

#web-development #javascript #software-development #technology #programming