Bootstrap 4 Tabs Pills Navs with Examples

Bootstrap 4 Tabs Pills Navs are very useful part in web application.

Lets discuss them one by one

Bootstrap 4 nav menu

The navigation bar can be styled in various ways using Bootstrap 4. here we will look at some sample codes for styling the Navs as per different style requirements.

Bootstrap 4 Horizontal Navbar

For creating a simple horizontal nav menus, you can just add the .nav class with a <ul> tag, followed by .nav-item for each <li> and add the .nav-link class to their links:

<ul class="nav">
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
    </li>
</ul>

</li>

</li>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

Run It

bootstrap 4 nav classes

The .justify-content-center the class centers the nav, while the .justify-content-end class right-aligns it.

<ul class="nav justify-content-center"></ul>

1	<ul class="nav justify-content-center"></ul>

Try It

<ul class="nav justify-content-end"></ul>

1	<ul class="nav justify-content-end"></ul>

Try It

Vertical navbar bootstrap 4

The .flex-column the class creates a vertical nav:

<ul class="nav flex-column"></ul>

1	<ul class="nav flex-column"></ul>

Vertical menu bar in bootstrap example

Try It

Bootstrap 4 tabs

.nav-tabs the class turns the nav menu into navigation tabs.

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
    </li>
</ul>

<a class="nav-link active" href="#">Active</a>

</li>

</li>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

Try It

Bootstrap 4 pills

.nav-pills class to make Navigation pills

<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
    </li>
</ul>

<a class="nav-link active" href="#">Active</a>

</li>

</li>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

Try It

Justified Tabs/pills

.nav-justified class justifies the tabs/pills

<ul class="nav nav-pills nav-justified">..</ul>

1	<ul class="nav nav-pills nav-justified">..</ul>

Try It

<ul class="nav nav-pills nav-justified">..</ul>

1	<ul class="nav nav-pills nav-justified">..</ul>

Try It

Tabs with Dropdown

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 2</a>
            <a class="dropdown-item" href="#">Link 3</a>
        </div>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
    </li>
</ul>

<a class="nav-link active" href="#">Active</a>

</li>

<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>

</div>

</li>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

Try It

Pills with Dropdown

As mentioned in above code change class to nav-pills

<ul class="nav nav-pills">
</ul>

1 2	<ul class="nav nav-pills"> </ul>

Try It

Toggleable / Bootstrap dynamic tabs

For making the tabs toggle-able you can add the data-toggle="tab" attribute with each link.

After that, add a .tab-pane class along with a unique ID attached to the tab.

Wrap them all inside a <div> element with the .tab-content class.

The tabs can also be styled to fade in or fade out when you click on them. To add this, add the .fade class to .tab-pane:

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
    </li>
</ul>

<div class="tab-content">
    <div class="tab-pane container active" id="home">...</div>
    <div class="tab-pane container fade" id="menu1">...</div>
    <div class="tab-pane container fade" id="menu2">...</div>
</div>

</li>

</li>

</li>

</ul>

</div>

Try It

Toggle-able / Dynamic Pills

Just like the dynamic tabs you can apply the code to pills. Therefore, all you need to do is change the data-toggle attribute to data-toggle=”pill”:

<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="pill" href="#home">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane container active" id="home">...</div>
    <div class="tab-pane container fade" id="menu1">...</div>
    <div class="tab-pane container fade" id="menu2">...</div>
</div>

</li>

</li>

</li>

</ul>

</div>

Try It

Bootstrap 4 vertical tabs responsive

Try It

which of the following bootstrap styles are used to create a vertical pills navigation?

a) .nav-stacked b) .nav-pills c) .nav-justified d) .tab-pane

.nav-stacked is used to create vertical pills navigation.