Similarly, you can create pill based navigation by adding the class .nav-pills on the basic nav instead of class .nav-tabs, as shown in the following example:

Example

<nav class="nav nav-pills">
    <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:

Similarly, like nav tabs you can also add icons to your pills nav to make it more attractive:

Example

<nav class="nav nav-pills">
    <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:

Additionally, you can apply the class .flex-column on the .nav element to make the pills nav appear vertically stacked. You can alternatively use responsive versions (e.g., .flex-sm-column) if you need to stack them on specific viewports but not on others.

Example

<nav class="nav nav-pills flex-column">
    <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: