Bootstrap Navbar In this tutorial you will learn how to create Bootstrap Navbar In this tutorial you will learn how to create the static and fixed navigation headers using the Bootstrap navbar component.Creating a Simple

Navbar with Bootstrap
You can use the navigation bar guide components to create your own website or application in response to the navigation title. These responses have collapsed in the beginning of the navigation device smaller viewport as mobile phone use, but when the user clicks the toggle button extension. However, it would be on a normal level of medium and large similar laptop or desktop devices.
You can also create different variations such as pull-down menus and search box navbars navigation bar and the fixed position of the navigation bar with much less effort. The following example will show you how to create a simple static navigation links navigation bar.



<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>



— 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 form within navbars.




<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, forms, 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 class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">Messages <b class="caret"></b></a>


<ul role="menu" class="dropdown-menu">


<li><a href="#">Inbox</a></li>




<li><a href="#">Drafts</a></li>




<li><a href="#">Sent Items</a></li>




<li class="divider"></li>




<li><a href="#">Trash</a></li>


                </ul>


            </li>


        </ul>




<form role="search" class="navbar-form navbar-left">


<div class="form-group">
                <input type="text" placeholder="Search" class="form-control">
            </div>


        </form>




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


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


        </ul>


    </div>


</nav>


 

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

Bootstrap Static Navbar with Dropdown and Search Form

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

You can also include dropdowns and search form within 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.

<nav role="navigation" class="navbar navbar-default navbar-fixed-top">

<div class="container">
        <!-- 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>

    </div>

</nav>

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.

<nav role="navigation" class="navbar navbar-default navbar-fixed-bottom">
    <div class="container-fluid">
        <!-- 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>
    </div>
</nav>