Creating the Basic Tabs


Simply, add the class .nav-tabs to the basic nav to generate a tabbed navigation, like this:

Example

<nav class="nav nav-tabs">
    <a href="#" class="nav-item nav-link active">Home</a>
    <a href="#" class="nav-item nav-link">Profile</a>
    <a href="#" class="nav-item nav-link">Messages</a>
    <a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
</nav>

— The output of the above example will look something like this:

Bootstrap Tabbed Navigation

See the tutorial on Bootstrap tabs to learn how to create dynamic tab to toggle between content.

You can also add icons to your tab items to make it more attractive, as shown here:

Example

<nav class="nav nav-tabs">
    <a href="#" class="nav-item nav-link active">
        <i class="bi-house-door"></i> Home
    </a>
    <a href="#" class="nav-item nav-link">
        <i class="bi-person"></i> Profile
    </a>
    <a href="#" class="nav-item nav-link">
        <i class="bi-envelope"></i> Messages
    </a>
    <a href="#" class="nav-item nav-link disabled" tabindex="-1">
        <i class="bi-bar-chart"></i> Reports
    </a>
</nav>

— The output of the above example will look something like this:

Bootstrap Tabs with Icons

See the tutorial on Bootstrap icons to learn how to use icons in Bootstrap. Also, check out Bootstrap icons classes to explore the icons provided by Bootstrap.


Leave a Reply

Your email address will not be published. Required fields are marked *