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

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

 

Creates a default navigation bar.
.navbar-brand Used to add a link or header element, to add the logo or header.
.navbar-btn Aligns the buttons inside a navbar in vertical order 
.navbar-collapse For making navbar collapsable. (hidden and replaced with a menu on mobile phones or in small viewport device)
.navbar-default Creates a default navigation bar. (light-grey background color)
.navbar-inverse Creates a black navigation bar. (color of navbar becomes light-grey)
.navbar-fixed-top For 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-toggle Styles 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

Your email address will not be published. Required fields are marked *