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.
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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> |
bootstrap 4 nav classes
The .justify-content-center
the class centers the nav, while the .justify-content-end
class right-aligns it.
1 | <ul class="nav justify-content-center"></ul> |
1 | <ul class="nav justify-content-end"></ul> |
Vertical navbar bootstrap 4
The .flex-column
the class creates a vertical nav:
1 | <ul class="nav flex-column"></ul> |
Vertical menu bar in bootstrap example
Bootstrap 4 tabs
.nav-tabs
the class turns the nav menu into navigation tabs.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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> |
Bootstrap 4 pills
.nav-pills
class to make Navigation pills
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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> |
Justified Tabs/pills
.nav-justified
class justifies the tabs/pills
1 | <ul class="nav nav-pills nav-justified">..</ul> |
1 | <ul class="nav nav-pills nav-justified">..</ul> |
Tabs with Dropdown
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <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> |
Pills with Dropdown
As mentioned in above code change class to nav-pills
1 2 | <ul class="nav nav-pills"> </ul> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <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> |
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”:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <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> |
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
Read More