- Bootstrap 4 Tutorial
- Bootstrap 4 - Home
- Bootstrap 4 - Overview
- Bootstrap 4 - Environment Setup
- Bootstrap 4 - Layout
- Bootstrap 4 - Grid System
- Bootstrap 4 - Content
- Bootstrap 4 - Components
- Bootstrap 4 - Utilities
- Differences Between Bootstrap 3 and 4
- Bootstrap 4 Useful Resources
- Bootstrap 4 - Quick Guide
- Bootstrap 4 - Useful Resources
- Bootstrap 4 - Discussion
Bootstrap 4 - Navs
Description
Bootstrap provides navigation items for your site in a horizontal menu.
Base Nav with Disabled Link
Create a nav menu by adding .nav class to <ul> element followed by nav items and add the nav.link class to create link for the nav items. The following example demonstrates this −
Example
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous"> <title>Bootstrap 4 Example</title> </head> <body> <div class = "container"> <h2>Base Nav and Disabled Link</h2> <ul class = "nav"> <li class = "nav-item"> <a class = "nav-link active" href = "#">Home</a> </li> <li class = "nav-item"> <a class = "nav-link" href = "#">About Us</a> </li> <li class = "nav-item"> <a class = "nav-link" href = "#">Contact</a> </li> <li class = "nav-item"> <a class = "nav-link disabled" href = "#">Sign-In (Disabled)</a> </li> </ul> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"> </script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin = "anonymous"> </script> <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin = "anonymous"> </script> </body> </html>
It will produce the following result −
Output
Aligned Nav
Nav can be aligned to the center by adding the .justify-content-center class and to the right side by adding .justify-content-end class as shown in the below example −
Example
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous"> <title>Bootstrap 4 Example</title> </head> <body> <div class="container"> <h2>Center Aligned Nav</h2> <ul class = "nav justify-content-center"> <li class = "nav-item"> <a class = "nav-link active" href = "#">Home</a> </li> <li class = "nav-item"> <a class = "nav-link" href = "#">About Us</a> </li> <li class = "nav-item"> <a class = "nav-link" href = "#">Contact</a> </li> <li class = "nav-item"> <a class = "nav-link" href = "#">Sign-In</a> </li> </ul> <h2>Right Aligned Nav</h2> <ul class = "nav justify-content-end"> <li class = "nav-item"> <a class = "nav-link active" href = "#">Home</a> </li> <li class = "nav-item"> <a class = "nav-link" href = "#">About Us</a> </li> <li class = "nav-item"> <a class = "nav-link" href = "#">Contact</a> </li> <li class = "nav-item"> <a class = "nav-link" href = "#">Sign-In</a> </li> </ul> </div> <!-- jQuery library --> <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous"></script> <!-- Popper --> <script src =" https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous"></script> <!-- Latest compiled and minified Bootstrap JavaScript --> <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous"></script> </body> </html>
It will produce the following result −
Output
Vertical Alignment
You can create vertical nav by adding the .flex-column class to the .nav element as shown in the example below −
Example
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous"> <title>Bootstrap 4 Example</title> </head> <body> <div class = "container"> <h2>Vertical Alignment</h2> <ul class = "nav flex-column"> <li class = "nav-item"> <a class = "nav-link active" href = "#">Home</a> </li> <li class = "nav-item"> <a class = "nav-link" href = "#">About Us</a> </li> <li class = "nav-item"> <a class = "nav-link" href = "#">Contact</a> </li> <li class = "nav-item"> <a class = "nav-link" href = "#">Sign-In</a> </li> </ul> </div> <!-- jQuery library --> <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous"></script> <!-- Popper --> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <!-- Latest compiled and minified Bootstrap JavaScript --> <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous"></script> </body> </html>
It will produce the following result −
Output
Tabs, Pills, Tabs and Pills with Dropdown
You can create tabbed interface nav by using .nav-tabs class and nav menu to nav pills by using .nav-pills class. You can also add a dropdown menu to a tab or pill by using the .dropdown class in <li> element as shown in the example below −
Example
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous"> <title>Bootstrap 4 Example</title> </head> <body> <div class = "container"> <h2>Navigation Tabs</h2> <ul class = "nav nav-tabs"> <li class = "nav-item"> <a class = "nav-link active" href = "#">Home</a> </li> <li class = "nav-item"> <a class = "nav-link" href = "#">About Us</a> </li> <li class = "nav-item"> <a class = "nav-link" href = "#">Contact</a> </li> <li class = "nav-item"> <a class = "nav-link" href = "#">Sign-In</a> </li> </ul> <br> <h2>Navigation Pills</h2> <ul class = "nav nav-pills"> <li class = "nav-item"> <a class = "nav-link active" href = "#">Home</a> </li> <li class = "nav-item"> <a class = "nav-link" href = "#">About Us</a> </li> <li class = "nav-item"> <a class = "nav-link" href = "#">Contact</a> </li> <li class = "nav-item"> <a class = "nav-link" href = "#">Sign-In</a> </li> </ul> <br> <h2>Tabs With Dropdown</h2> <ul class = "nav nav-tabs"> <li class = "nav-item"> <a class = "nav-link active" href = "#">Home</a> </li> <li class = "nav-item dropdown"> <a class = "nav-link dropdown-toggle" data-toggle = "dropdown" href = "#" role = "button" aria-haspopup = "true" aria-expanded = "false">Library</a> <div class = "dropdown-menu"> <a class = "dropdown-item" href = "#">HTML-5</a> <a class = "dropdown-item" href = "#">CSS-3</a> <a class = "dropdown-item" href = "#">JavaScript</a> <div class = "dropdown-divider"></div> <a class = "dropdown-item" href = "#">Bootstrap 4</a> </div> </li> <li class = "nav-item"> <a class = "nav-link" href = "#">About Us</a> </li> <li class = "nav-item"> <a class = "nav-link" href = "#">Contact</a> </li> </ul> <br> <h2>Pills with dropdown</h2> <ul class = "nav nav-pills"> <li class = "nav-item"> <a class = "nav-link active" href = "#">Home</a> </li> <li class = "nav-item dropdown"> <a class = "nav-link dropdown-toggle" data-toggle = "dropdown" href =" #" role = "button" aria-haspopup = "true" aria-expanded =" false">Library</a> <div class = "dropdown-menu"> <a class = "dropdown-item" href = "#">HTML-5</a> <a class = "dropdown-item" href = "#">CSS-3</a> <a class = "dropdown-item" href = "#">JavaScript</a> <div class = "dropdown-divider"></div> <a class = "dropdown-item" href = "#">Bootstrap 4</a> </div> </li> <li class = "nav-item"> <a class = "nav-link" href = "#">About Us</a> </li> <li class = "nav-item"> <a class = "nav-link" href = "#">Contact</a> </li> </ul> </div> <!-- jQuery library --> <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous"></script> <!-- Popper --> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous"></script> <!-- Latest compiled and minified Bootstrap JavaScript --> <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous"></script> </body> </html>
It will produce the following result −
Output
Toggleable Tabs and Pills
You can create toggleable tabs or pills by adding the data-toggle="tab" or data-toggle="pill" attribute to <a> element. For every tab or pill, add a .tab-pane class with a unique ID and enter the content inside a <div> element with the .tab-content class.
The following example demonstrates this −
Example
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous"> <title>Bootstrap 4 Example</title> </head> <body> <div class = "container"> <h2>Toggleable Tabs</h2> <ul class = "nav nav-tabs" id = "myTab" role = "tablist"> <li class = "nav-item"> <a class = "nav-link active" id = "home-tab" data-toggle = "tab" href = "#home" role = "tab" aria-controls = "home" aria-selected = "true">Home</a> </li> <li class = "nav-item"> <a class = "nav-link" id = "aboutus-tab" data-toggle = "tab" href = "#aboutus" role = "tab" aria-controls = "aboutus" aria-selected = "false">About Us</a> </li> <li class = "nav-item"> <a class = "nav-link" id = "contact-tab" data-toggle = "tab" href = "#contact" role = "tab" aria-controls = "contact" aria-selected = "false">Contact</a> </li> </ul> <div class = "tab-content" id = "myTabContent"> <div class = "tab-pane fade show active" id = "home" role = "tabpanel" aria-labelledby = "home-tab">Content for Home tab</div> <div class = "tab-pane fade" id = "aboutus" role = "tabpanel" aria-labelledby = "aboutus-tab">Content for About Us tab</div> <div class = "tab-pane fade" id = "contact" role = "tabpanel" aria-labelledby = "contact-tab">Content for Contact tab</div> </div> <br> <h2>Toggleable Pills</h2> <ul class = "nav nav-pills mb-3" id = "pills-tab" role = "tablist"> <li class = "nav-item"> <a class = "nav-link active" id = "pills-home-tab" data-toggle = "pill" href = "#pills-home" role = "tab" aria-controls = "pills-home" aria-selected = "true">Home</a> </li> <li class = "nav-item"> <a class = "nav-link" id = "pills-aboutus-tab" data-toggle = "pill" href = "#pills-aboutus" role = "tab" aria-controls = "pills-aboutus" aria-selected = "false">About Us</a> </li> <li class = "nav-item"> <a class = "nav-link" id = "pills-contact-tab" data-toggle = "pill" href = "#pills-contact" role = "tab" aria-controls = "pills-contact" aria-selected = "false">Contact</a> </li> </ul> <div class = "tab-content" id = "pills-tabContent"> <div class = "tab-pane fade show active" id = "pills-home" role = "tabpanel" aria-labelledby = "pills-home-tab"> Content for Home tab </div> <div class = "tab-pane fade" id = "pills-aboutus" role = "tabpanel" aria-labelledby = "pills-aboutus-tab"> Content for About Us tab </div> <div class = "tab-pane fade" id = "pills-contact" role = "tabpanel" aria-labelledby = "pills-contact-tab"> Content for Contact tab </div> </div> </div> <!-- jQuery library --> <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous"> </script> <!-- Popper --> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous"> </script> <!-- Latest compiled and minified Bootstrap JavaScript --> <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"> </script> </body> </html>
It will produce the following result −