Prev Page
Next Page  
Bootstrap Navbars
Bootstrap Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.

You can also create different variations of the navbar such as navbars with dropdown menus and search boxes as well as fixed positioned navbar with much less effort. The following example will show you how to create a simple static navbar with navigation links.
Default Navbar
The bootstrap navigation bar can extend or collapse, depending on the screen size. A standard navigation bar is created with <nav class="navbar navbar-default">.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Default Navbar</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">

<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Free Time Learning</a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    <li class="active"> 
       <a href="http://freetimelearning.com" target="_blank">Home</a>
    </li>
    <li> 
       <a href="http://freetimelearning.com/html5-tutorial.php" target="_blank">HTML5</a>
    </li>
    <li>
       <a href="http://freetimelearning.com/css3-tutorial.php" target="_blank">CSS3</a>
    </li>
    <li>
       <a href="http://freetimelearning.com/javascript-tutorial.php" target="_blank">Javascript</a>
    </li>
    <li>
      <a href="http://freetimelearning.com/bootstrap-tutorial.php"  target="_blank">Bootstrap</a></li>
  </ul>
</div>
</nav>

</div>

</body>
</html>
Output :
Default navbar
Inverted Navbar
The bootstrap inverted navbar with a black background and with white text, simply add the .navbar-inverse class to the .navbar class as demonstrated in the following example
<!DOCTYPE html>
<html>
	<head>
    	<title>Bootstrap Inverted Navbar</title>
        <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script type="text/javascript" src=" https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
	
    <body>

      <div class="container-fluid">
		<nav class="navbar navbar-inverse">
			<div class="container-fluid">
			<div class="navbar-header">
			<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a href="#" class="navbar-brand">Free Time Learning</a>
			</div>
			<div id="navbarCollapse" class="collapse navbar-collapse">
			<ul class="nav navbar-nav">
			  <li class="active"> 
				<a href="http://freetimelearning.com" target="_blank">Home</a>
			  </li>
			  <li> 
				<a href="http://freetimelearning.com/html5-tutorial.php" target="_blank">HTML5</a>
			  </li>
			  <li>
				<a href="http://freetimelearning.com/css3-tutorial.php" target="_blank">CSS3</a>
			  </li>
			  <li>
				<a href="http://freetimelearning.com/javascript-tutorial.php" target="_blank">Javascript</a>
			  </li>
			  <li>
				<a href="http://freetimelearning.com/bootstrap-tutorial.php"  target="_blank">Bootstrap</a>
			  </li>
			</ul>
			</div>
		</nav>
	  </div>
	   
    </body>	
</html>
Output :
Inverse navbar
Fixed Top Navbar
Bootstrap navbar position is fixed top. The navbar class is .navbar-fixed-top and include a .container or .container-fluid to center and pad navbar content.
<!DOCTYPE html>
<html>
<head>
   <title>Fixed Top Navbar</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
  <div class="navbar-header">
       <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
         </button>
         <a href="#" class="navbar-brand">Free Time Learning</a>
        </div>
        <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"> <a href="http://freetimelearning.com" target="_blank">Home</a></li>
          <li> <a href="http://freetimelearning.com/html5-tutorial.php" target="_blank">HTML5</a></li>
          <li><a href="http://freetimelearning.com/css3-tutorial.php" target="_blank">CSS3</a></li>
          <li><a href="http://freetimelearning.com/javascript-tutorial.php" target="_blank">Javascript</a></li>
          <li><a href="http://freetimelearning.com/bootstrap-tutorial.php"  target="_blank">Bootstrap</a></li>
        </ul>
      </div>
</nav>
  
</div>
 
<div class="container-fluid">
 
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><h4 align="center">Fixed Top Navbar</h4><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
    
</div>
 
 
</body>
</html>
Output :
Fixed Top navbar
Fixed Bottom Navbar
Bootstrap navbar postion is fixed bottom. The navbar class is .navbar-fixed-bottom and include a .container or .container-fluid to center and pad navbar content.
<!DOCTYPE html>
<html>
<head>
   <title>Fixed Bottom Navbar</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container-fluid">
  <div class="navbar-header">
       <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">Free Time Learning</a>
        </div>
        <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"> <a href="http://freetimelearning.com" target="_blank">Home</a></li>
          <li> <a href="http://freetimelearning.com/html5-tutorial.php" target="_blank">HTML5</a></li>
          <li><a href="http://freetimelearning.com/css3-tutorial.php" target="_blank">CSS3</a></li>
          <li><a href="http://freetimelearning.com/javascript-tutorial.php" target="_blank">Javascript</a></li>
          <li><a href="http://freetimelearning.com/bootstrap-tutorial.php"  target="_blank">Bootstrap</a></li>
        </ul>
      </div>
</nav>
  
</div>
 
<div class="container-fluid">
 
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><h4 align="center">
Fixed Bottom Navbar</h4><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
    
</div>
 
 
</body>
</html>
Output :
Fixed Bottom Navbar
Static Top Navbar
You can create a full-width navbar that scrolls away with the page by adding .navbar-static-top and include a .container or .container-fluid to center and pad navbar content.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Static Top Navbar</title>
   <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
   <script type="text/javascript" src="../js/jquery.min.js"></script>
   <script type="text/javascript" src="../js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Free Time Learning</a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"> <a href="http://freetimelearning.com" target="_blank">Home</a></li>
<li> 
  <a href="http://freetimelearning.com/html5-tutorial.php" target="_blank">HTML5</a>
</li>
<li>
  <a href="http://freetimelearning.com/css3-tutorial.php" target="_blank">CSS3</a>
</li>
<li>
  <a href="http://freetimelearning.com/javascript-tutorial.php" target="_blank">Javascript</a>
</li>
<li>
  <a href="http://freetimelearning.com/bootstrap-tutorial.php"  target="_blank">Bootstrap</a>
</li>
</ul>
</div>
</div>
</nav>
  
</div>
 
 
</body>
</html>
Output :
Static Top navbar
Dropdown Navbars
Navigation bars can also hold dropdown menus. The following example adds a dropdown menu for the "HTML5" button:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Dropdown Navbars</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">

<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>
<a href="http://freetimelearning.com/" class="navbar-brand">Free Time Learning</a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li> <a href="http://freetimelearning.com/" target="_blank">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">HTML5
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
  <a href="http://freetimelearning.com/html5/html5-events.php" target="_blank">Events</a>
</li>
<li>
  <a href="http://freetimelearning.com/html5/html5-section-tags.php" target="_blank">Section Tag</a>
</li>
<li>
  <a href="http://freetimelearning.com/html5/html5-dialog-tag.php" target="_blank">Dialog Tag</a>
</li>
</ul>
</li>

<li>
   <a href="http://freetimelearning.com/css3-tutorial.php" target="_blank">CSS3</a>
</li>
<li>
   <a href="http://freetimelearning.com/javascript-tutorial.php" target="_blank">Javascript</a>
</li>
<li>
   <a href="http://freetimelearning.com/bootstrap-tutorial.php"  target="_blank">Bootstrap</a>
</li>
</ul>
</div>
</nav>

</div>


</body>
</html>
Output :
Dropdown navbar
Component Alignment
The .navbar-right class is used to right-align navigation bar buttons. In the following example we insert a "Contact" button and a "Login" button to the right in the navigation bar.
<!DOCTYPE html>
<html>
<head>
<title>Component Alignment</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">

<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>
<a href="http://freetimelearning.com/" class="navbar-brand">Free Time Learning</a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="http://freetimelearning.com/html5-tutorial.php" target="_blank">HTML5</a></li>
<li><a href="http://freetimelearning.com/css3-tutorial.php" target="_blank">CSS3</a></li>
<li><a href="http://freetimelearning.com/javascript-tutorial.php" target="_blank">Javascript</a></li>
<li><a href="http://freetimelearning.com/bootstrap-tutorial.php"  target="_blank">Bootstrap</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="http://freetimelearning.com/contact-us.php" target="_blank">Contact</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
</nav>

</div>


</body>
</html>
Output :
Component Alignment
Forms, Buttons and Text Navbars

Navbar Forms : To add form elements inside the navbar, add the .navbar-form class to a form element and add an input(s).

Navbar Buttons : To add buttons inside the navbar, add the .navbar-btn class on a Bootstrap button

Navbar Text : Bootstrap text in an element with .navbar-text, usually on a <p> tag for proper leading and color.

<!DOCTYPE html>
<html>
<head>
   <title>forms, buttons and text navbars</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
<h4>Navber Form</h4>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="http://freetimelearning.com/" class="navbar-brand">Free Time Learning</a>
       </div>
     <div id="navbarCollapse" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li><a href="http://freetimelearning.com/html5-tutorial.php" target="_blank">HTML5</a></li>
      <li><a href="http://freetimelearning.com/css3-tutorial.php" target="_blank">CSS3</a></li>
      <li><a href="http://freetimelearning.com/javascript-tutorial.php" target="_blank">Javascript</a></li>
      <li><a href="http://freetimelearning.com/bootstrap-tutorial.php"  target="_blank">Bootstrap</a></li>
    </ul>
    <form class="navbar-form navbar-left">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
</nav>
 
<br /><br />
 
<h4>Navbar Button</h4>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="http://freetimelearning.com/" class="navbar-brand">Free Time Learning</a>
       </div>
     <div id="navbarCollapse" class="collapse navbar-collapse">
     <button class="btn btn-default navbar-btn">HTML5</button>
     <button class="btn btn-primary navbar-btn">CSS3</button>
     <button class="btn btn-info navbar-btn">JavaScript</button>
     <button class="btn btn-success navbar-btn">PHP</button>
     <button class="btn btn-warning navbar-btn">jQuery</button>
     <button class="btn btn-danger navbar-btn">Java</button>
  </div>
</nav>
 
<br /><br />
 
<h4>Navbar Text</h4>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="http://freetimelearning.com/" class="navbar-brand">Free Time Learning</a>
       </div>
     <div id="navbarCollapse" class="collapse navbar-collapse">
    <p class="navbar-text">Sample text</p>
        <p class="navbar-text">Sample text - 2</p>
  </div>
</nav>
  
</div>
 
 
</body>
</html>
Output :
Forms Buttons Text
  Prev Page
Next Page