The navigation bar can be styled in various ways using Bootstrap 4.
Horizontal Nav Menu
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> |
Aligned Nav
The .justify-content-center 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 Nav
The .flex-column class creates a vertical nav:
|
1 |
<ul class="nav flex-column"></ul> |
Tabs
.nav-tabs 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> |
Pills
.nav-pills class to make Navigation pills
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> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
Pills with Dropdown <ul class="nav nav-pills"> <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> |
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> |
Toggleable / 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 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> |