Using the navigation with Bootstrap
Using the navigation with the most popular front-end framework
The Bootstrap framework is the most popular front-end framework in the world. In this guide we will show you some ways to use navigation with this framework.
Installing the navigation bar
Just follow the documentation to set up a navigation bar. No secrets.
Navigation with Bootstrap "container"
If in your Bootstrap page you are using the "container" element in the sections, you may want to use this element also in the navigation bar to align the content. Just put the content of the "nav" element inside a "container":
Copy
<nav id="navigation" class="navigation navigation-justified"> <!-- Container start --> <div class="container"> <div class="navigation-header"> <div class="navigation-brand-text"> <a href="#">NAVIGATION</a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-brand-text"> <a href="#">NAVIGATION</a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Services</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Blog</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Contact</a> </li> </ul> </div> </div> <!-- Container end --> </nav>
Without a "container":
Using the "container" element:
The "container" element gives an extra padding to the navigation
Bootstrap grid
Feel free to use the Bootstrap grid inside a megamenu:
Copy
<nav id="navigation" class="navigation navigation-justified"> <div class="navigation-header"> <div class="navigation-brand-text"> <a href="#">NAVIGATION</a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-brand-text"> <a href="#">NAVIGATION</a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item"> <a class="navigation-link" href="#">Megamenu 1</a> <div class="navigation-megamenu"> <div class="navigation-megamenu-container"> <div class="container"> <div class="row"> <div class="col-lg"> One of three columns </div> <div class="col-lg"> One of three columns </div> <div class="col-lg"> One of three columns </div> </div> </div> </div> </div> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Megamenu 2</a> <div class="navigation-megamenu"> <div class="navigation-megamenu-container"> <div class="container"> <div class="row"> <div class="col"> 1 of 2 </div> <div class="col"> 2 of 2 </div> </div> <div class="row"> <div class="col"> 1 of 3 </div> <div class="col"> 2 of 3 </div> <div class="col"> 3 of 3 </div> </div> </div> </div> </div> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Megamenu 3</a> <div class="navigation-megamenu"> <div class="navigation-megamenu-container"> <div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div> </div> <div class="row"> <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div> <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div> </div> <div class="row"> <div class="col-auto mr-auto">.col-auto .mr-auto</div> <div class="col-auto">.col-auto</div> </div> </div> </div> </div> </li> </ul> </div> </nav>
Navigation with Bootstrap elements
You can use Bootstrap elements in the navigation bar or as the content of a megamenu:
Copy
<nav id="navigation" class="navigation navigation-justified"> <div class="navigation-header"> <div class="navigation-brand-text"> <a href="#">NAVIGATION</a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-brand-text"> <a href="#">NAVIGATION</a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item"> <a class="navigation-link" href="#">Link</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Megamenu</a> <div class="navigation-megamenu"> <div class="navigation-megamenu-container"> <div class="alert alert-primary" role="alert"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus maximus leo, nec sollicitudin lorem varius in. Nunc rhoncus eros id pretium tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur in risus blandit, finibus sem quis, commodo nulla. </div> <table class="table table-bordered"> <thead class="thead-light"> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>John</td> <td>Doe</td> <td>@doe</td> </tr> <tr> <th scope="row">2</th> <td>Jack</td> <td>Doe</td> <td>@jack</td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Mark</td> <td>@mark</td> </tr> </tbody> </table> <div class="progress mb-3"> <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="75" aria-valuemax="100">75%</div> </div> <div class="progress mb-3"> <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div> </div> </div> </div> </li> </ul> <div class="navigation-body-section d-flex flex-column flex-lg-row"> <a class="btn btn-primary mb-3 mb-lg-0 mr-lg-3" href="#" role="button">Button</a> <input type="text" class="form-control" placeholder="Input"> </div> </div> </nav>
See the list of tutorials for other ways to modify the navigation bar and add features.