How To Create a Navigation Bar in Bootstrap

Today in this Bootstrap related post, we will learn, how to create a navigation bar in Bootstrap. A navigation bar is just like a header which is generally placed at the top of the page. In Bootstrap, a navigation bar can extend or collapse, depending on the screen size. A default navigation bar is created with <nav class=”navbar navbar-default”>.

How to create a Navbar using Bootstrap

  • First, we have to create a class named as nav.
  • After that, add classes as per your need what type of navbar you want. I have used .navbar navbar-default and .navbar-fixed-top for the bootstrap default setting for the navbar and for fixed at the top respectively.
  • Now create a div named as the container.
  • In the container create an unordered list and write all the things which you need at the navigation bar.
  • And at last, style the nav class and container as per your requirement.

Navbar Classes in Bootstrap

ClassSize of Viewport
.nav .navbar-navUsed on an unordered list that contains the list items with links inside a navigation bar.
.activeUsed for to add the gray color background to the active link in default navbar in Bootstrap.
.navbar

 

Creates a default navigation bar.
.navbar-brandUsed to add a link or header element, to add the logo or header.
.navbar-btnAligns the buttons inside a navbar in vertical order 
.navbar-collapseFor making navbar collapsable. (hidden and replaced with a menu on mobile phones or in small viewport device)
.navbar-defaultCreates a default navigation bar. (light-grey background color)
.navbar-inverseCreates a black navigation bar. (color of navbar becomes light-grey)
.navbar-fixed-topFor navbar to be fixed at the top of the screen.
 

.navbar-fixed-bottom

 

For navbar to be fixed at the bottom of the screen.
.navbar-toggleStyles the button which will open the navbar on small screens.

 

Here I am providing the code to get a navbar. You can customize it to make changes in the navbar, you can modify in the header to get the change in list group.

Also read,

Sample code to create nav bar in bootstrap

<!DOCTYPE html>
<html>
 <head>
  	<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>

    	body { padding-top: 70px; 
    			margin: 110px;
    			font-style: sans-serif;
    			font-size: 15px;
    		}
    	
    	#navbar {
        overflow: hidden;
        background-color: #333;
          }

    #navbar a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px;
        text-decoration: none;
           }

    h1{
        text-align: center;
      }
      
    </style>
 </head>
 <body>
   <nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div id="navbar">
  <a href="#">Home</a>
  <a href="#">News</a>
  <a href="#">Contact</a>
</div>
  </div>
</nav>
      <h1>Top 5 Most Important Things in Life/h1>
<p>
<h2> Health</h2> <br>some texts</p>
<br>
<p><h2> Family</h2> <br>some texts</p>
<br>
<p><h2> Friends</h2> <br>some texts.</p>
<br>
<p><h2> Purpose</h2> <br>some texts</p>
<br>
<p><h2> Freedom</h2> <br>some texts.</p><br>

  <script src="js/jquery-2.1.4.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/script.js"></script>
 </body>
</html>

Leave a Reply