How to create Simple Navbar with Bootstrap

Creating a Simple Navbar with Bootstrap:

You can use the Bootstrap navbar component to create responsive navigation header for your website or application. These responsive navbar initially collapsed on devices having small viewports like cell-phones but expand when user click the toggle button. However, it will be horizontal as normal on the medium and large devices like laptop or desktop.

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.

Note:Use the classes .navbar-left or .navbar-right instead of .pull-left or.pull-right to align the nav links, forms, buttons or text inside the navbar.

• <nav role="navigation" class="navbar navbar-default">

•     <!-- Brand and toggle get grouped for better mobile display -->

•     <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">Brand</a>

•     </div>

•     <!-- Collection of nav links and other content for toggling -->

•     <div id="navbarCollapse" class="collapse navbar-collapse">

•         <ul class="nav navbar-nav">

•             <li class="active"><a href="#">Home</a></li>

•             <li><a href="#">Profile</a></li>

•             <li><a href="#">Messages</a></li>

•         </ul>

•         <ul class="nav navbar-nav navbar-right">

•             <li><a href="#">Login</a></li>

•         </ul>

•     </div>

• </nav>