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:

bootstrap 4 nav classes

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

Vertical navbar bootstrap 4

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

Vertical menu bar in bootstrap example

Bootstrap 4 tabs

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

Bootstrap 4 pills

.nav-pills class  to make Navigation pills

Justified Tabs/pills

.nav-justified class justifies the tabs/pills

Tabs with Dropdown

Pills with Dropdown

As mentioned in above code change class to nav-pills

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:

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”:

Bootstrap 4 vertical tabs responsive

Bootstrap 4 vertical tabs responsive

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.

Also Read

Bootstrap Containers

Read More