Bootstrap Navbar

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

Bootstrap Navbar

In this tutorial you will learn how to create static and fixed positioned responsive navigation headers using the Bootstrap navbar component.

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.

Example

  •  class="navbar navbar-default">
  •     
  •      class="navbar-header">
  •          type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
  •              class="sr-only">Toggle navigation
  •              class="icon-bar">
  •              class="icon-bar">
  •              class="icon-bar">
  • 
     
  •          href="#" class="navbar-brand">Brand
  • 
     
  •     
  •      id="navbarCollapse" class="collapse navbar-collapse">
  •          class="nav navbar-nav">
  •              class="active"> href="#">Home
  • 
     
    • href="#">Profile
  • 
     
    • href="#">Messages
  • 
     
  •          class="nav navbar-nav navbar-right">
  • 
     
    • href="#">Login
  • 
     
  • 
     
  • 
     

— The output of the above example will look something like this:

Bootstrap Static Navbar

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.

You can also include dropdowns and search box within the navbars.

Example

  •  class="navbar navbar-default">
  •     
  •      class="navbar-header">
  •          type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
  •              class="sr-only">Toggle navigation
  •              class="icon-bar">
  •              class="icon-bar">
  •              class="icon-bar">
  • 
     
  •          href="#" class="navbar-brand">Brand
  • 
     
  •     
  •      id="navbarCollapse" class="collapse navbar-collapse">
  •          class="nav navbar-nav">
  •              class="active"> href="#">Home
  • 
     
    • href="#">Profile
  •              class="dropdown">
  •                  data-toggle="dropdown" class="dropdown-toggle" href="#">Messages  class="caret">
  •                  class="dropdown-menu">
  • 
     
    • href="#">Inbox
  • 
     
    • href="#">Drafts
  • 
     
    • href="#">Sent Items
  •                      class="divider">
  • 
     
    • href="#">Trash
  • 
     
  • 
     
  • 
     
  •          class="navbar-form navbar-left">
  •              class="input-group">
  •                  type="text" class="form-control" placeholder="Search">
  •                  class="input-group-btn">
  •                      type="button" class="btn btn-default"> class="glyphicon glyphicon-search">
  • 
     
  • 
     
  • 
     
  •          class="nav navbar-nav navbar-right">
  • 
     
    • href="#">Login
  • 
     
  • 
     
  • 
     

— The output of the above example will look something like this:

Tip:To create navbars that is not fixed on the top or bottom, place it anywhere within a .container, which sets the width of your site and content.

Check out the snippets section for examples of some beautifully designed Bootstrap navbars


Bootstrap Fixed Navbar

Bootstrap also provides mechanism to create navbar that is fixed on the top or bottom of the viewport and will scroll with the content on the page.

Creating Navbar Fixed to Top

Add an extra class .navbar-fixed-top in addition to the .navbar and .navbar-default base class to create navbars that is fixed on the top.

Example

  •  class="navbar navbar-default navbar-fixed-top">
  •      class="container">
  •         
  •          class="navbar-header">
  •              type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
  •                  class="sr-only">Toggle navigation
  •                  class="icon-bar">
  •                  class="icon-bar">
  •                  class="icon-bar">
  • 
     
  •              href="#" class="navbar-brand">Brand
  • 
     
  •         
  •          id="navbarCollapse" class="collapse navbar-collapse">
  •              class="nav navbar-nav">
  •                  class="active"> href="#">Home
  • 
     
    • href="#">Profile
  • 
     
    • href="#">Messages
  • 
     
  •              class="nav navbar-nav navbar-right">
  • 
     
    • href="#">Login
  • 
     
  • 
     
  • 
     
  • 
     

Tip:Place the fixed .navbar content inside the .container or .container-fluid for proper padding and alignment with the rest of the content.

Creating Navbar Fixed to Bottom

Similarly to create navbars that is fixed at the bottom add the class .navbar-fixed-bottom.

Example

  •  class="navbar navbar-default navbar-fixed-bottom">
  •      class="container-fluid">
  •         
  •          class="navbar-header">
  •              type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
  •                  class="sr-only">Toggle navigation
  •                  class="icon-bar">
  •                  class="icon-bar">
  •                  class="icon-bar">
  • 
     
  •              href="#" class="navbar-brand">Brand
  • 
     
  •         
  •          id="navbarCollapse" class="collapse navbar-collapse">
  •              class="nav navbar-nav">
  •                  class="active"> href="#">Home
  • 
     
    • href="#">Profile
  • 
     
    • href="#">Messages
  • 
     
  •              class="nav navbar-nav navbar-right">
  • 
     
    • href="#">Login
  • 
     
  • 
     
  • 
     
  • 
     

Note:Remember to add padding (at least 70px) to the top or bottom of the

element to avoid the content to go underneath the navbar while implementing fixed top or bottom navbar. Also be sure to add your custom style sheet after the core Bootstrap CSS file, otherwise it may not work.

Bootstrap Static Top Navbar

You can also create full-width navbar that appears on the top but scrolls away with the page by adding the class .navbar-static-top. Unlike the .navbar-fixed-top class, you do not need to change any padding on the 

 element.

Example

  •  class="navbar navbar-default navbar-static-top">
  •      class="container">
  •         
  •          class="navbar-header">
  •              type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
  •                  class="sr-only">Toggle navigation
  •                  class="icon-bar">
  •                  class="icon-bar">
  •                  class="icon-bar">
  • 
     
  •              href="#" class="navbar-brand">Brand
  • 
     
  •         
  •          id="navbarCollapse" class="collapse navbar-collapse">
  •              class="nav navbar-nav">
  •                  class="active"> href="#">Home
  • 
     
    • href="#">Profile
  • 
     
    • href="#">Messages
  • 
     
  •              class="nav navbar-nav navbar-right">
  • 
     
    • href="#">Login
  • 
     
  • 
     
  • 
     
  • 
     

Bootstrap Navbar with Search Form

Search form is very common component of the navbars and you have seen it on various website quite often. Search form can be placed inside the navbar using the class .navbar-form on the 

 element.

 

Example

  •  class="navbar navbar-default">
  •      class="navbar-header">
  •          type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
  •              class="sr-only">Toggle navigation
  •              class="icon-bar">
  •              class="icon-bar">
  •              class="icon-bar">
  • 
     
  •          href="#" class="navbar-brand">Brand
  • 
     
  •      id="navbarCollapse" class="collapse navbar-collapse">
  •          class="navbar-form navbar-left">
  •              class="form-group">
  •                  type="text" placeholder="Search" class="form-control">
  • 
     
  •              type="submit" class="btn btn-default">Submit
  • 
     
  • 
     
  • 
     

Creating the Inverted Variation of a Navbar

You can also create inverted variation of the Bootstrap navbar by adding an extra class .navbar-inverse to the .navbar base class, without any further change in markup.

Example

  •  class="navbar navbar-inverse">
  •     
  •      class="navbar-header">
  •          type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
  •              class="sr-only">Toggle navigation
  •              class="icon-bar">
  •              class="icon-bar">
  •              class="icon-bar">
  • 
     
  •          href="#" class="navbar-brand">Brand
  • 
     
  •     
  •      id="navbarCollapse" class="collapse navbar-collapse">
  •          class="nav navbar-nav">
  •              class="active"> href="#">Home
  • 
     
    • href="#">Profile
  •              class="dropdown">
  •                  data-toggle="dropdown" class="dropdown-toggle" href="#">Messages  class="caret">
  •                  class="dropdown-menu">
  • 
     
    • href="#">Inbox
  • 
     
    • href="#">Drafts
  • 
     
    • href="#">Sent Items
  •                      class="divider">
  • 
     
    • href="#">Trash
  • 
     
  • 
     
  • 
     
  •          class="navbar-form navbar-left">
  •              class="input-group">
  •                  type="text" class="form-control" placeholder="Search">
  •                  class="input-group-btn">
  •                      type="button" class="btn btn-default"> class="glyphicon glyphicon-search">
  • 
     
  • 
     
  • 
     
  •          class="nav navbar-nav navbar-right">
  • 
     
    • href="#">Login
  • 
     
  • 
     
  • 
     

— The output of the above example will look something like this:

Bootstrap Inverted Navbar