Bootstrap Navbar

The navbar is a great feature and a prominent aspect of Bootstrap websites. It serves as a responsive base component for the navigation header in your application or website. The navbar collapses in mobile views and expands horizontally as the viewport width increases. At the core of the Bootstrap navbar, it includes the site name and basic navigation definition styles.

Default Navbar

To create a default navbar, follow these steps:

• Add the classes .navbar and .navbar-default to the <nav> tag.
• Add role="navigation" to the element above, which helps increase accessibility.
• Add a header class .navbar-header to the <div> element, which contains an <a> element with the class .navbar-brand. This makes the text appear larger.
• To add links to the navbar, simply add an unordered list with the classes .nav and .navbar-nav.

The following example demonstrates this:

Example

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">tutorialpro.org</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Another separated link</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>

The result is as follows:

Responsive Navbar

To add responsive features to the navbar, the content that needs to be collapsed must be wrapped in a <div> with the classes .collapse and .navbar-collapse. The collapsed navbar is essentially a button with the class .navbar-toggle and two data attributes. The first is data-toggle, which tells JavaScript what to do with the button, and the second is data-target, which indicates which element to toggle. Three <span> elements with the class .icon-bar create the so-called hamburger button. These toggle the elements in the .nav-collapse <div>. To achieve these functionalities, you must include the Bootstrap Collapse plugin.

The following example demonstrates this:

Example

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target="#example-navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">tutorialpro.org</a>
    </div>
    <div class="collapse navbar-collapse" id="example-navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Another separated link</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>

You can use the class .navbar-btn to add buttons to <button> elements that are not within a <form>, ensuring they are vertically centered in the navbar. .navbar-btn can also be used on <a> and <input> elements.

Do not use .navbar-btn on <a> elements within .navbar-nav, as it is not a standard button class.

The following example demonstrates this:

Example

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">tutorialpro.org</a>
    </div>
    <div>
        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Submit Button</button>
        </form>
        <button type="button" class="btn btn-default navbar-btn">
            Navbar Button
        </button>
    </div>
    </div>
</nav>

The result is as follows:

Text in Navbar

If you need to include text strings in the navigation, use the class .navbar-text. This is usually used with the <p> tag to ensure proper leading and color. The following example demonstrates this:

Example

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">tutorialpro.org</a>
    </div>
    <div>
        <p class="navbar-text">tutorialpro User Login</p>
    </div>
    </div>
</nav>

The result is as follows:

Navigation Links with Icons

If you want to use icons within regular navbar navigation components, use the class glyphicon glyphicon-* to set the icons. For more, see Bootstrap Icons. The following example demonstrates this:

Example

<nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
        <div class="navbar-header"> 
            <a class="navbar-brand" href="#">tutorialpro.org</a> 
        </div> 
        <ul class="nav navbar-nav navbar-right"> 
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
        </ul> 
    </div> 
</nav>

The result is as follows:

Component Alignment

You can use the utility classes .navbar-left or .navbar-right to align components like navigation links, forms, buttons, or text to the left or right in the navbar. Both classes add a CSS float in the specified direction. The following example demonstrates this:

Example

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">tutorialpro.org</a>
    </div>
    <div>
        <ul class="nav navbar-nav navbar-left">
            <li><a href="#">Left-aligned Link</a></li>
        </ul>
        <form class="navbar-form navbar-right" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
    </div>
    </div>
</nav>

The result is as follows: <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">tutorialpro.org</a> </div> <div> <!-- Align left --> <ul class="nav navbar-nav navbar-left"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">Separate link</a></li> <li class="divider"></li> <li><a href="#">Another separate link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <button type="submit" class="btn btn-default"> Align left - Submit button </button> </form> <p class="navbar-text navbar-left">Align left - Text</p> <!-- Align right --> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">Separate link</a></li> <li class="divider"></li> <li><a href="#">Another separate link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-right" role="search"> <button type="submit" class="btn btn-default"> Align right - Submit button </button> </form> <p class="navbar-text navbar-right">Right-aligned text</p> </div> </div> </nav>

Fixed to Top

Bootstrap navigation bars can be dynamically positioned. By default, it is a block-level element, positioned based on its placement in the HTML. With some helper classes, you can place it at the top or bottom of the page, or you can make it a static navbar that scrolls with the page.

If you want the navbar fixed at the top of the page, add the class .navbar-fixed-top to the .navbar class. The following example demonstrates this:

Example

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">tutorialpro.org</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Another separated link</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>

Fixed to Bottom

If you want the navbar fixed at the bottom of the page, add the class .navbar-fixed-bottom to the .navbar class. The following example demonstrates this:

Example

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">tutorialpro.org</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">

<li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">Another separated link</a></li> </ul> </li> </ul> </div> </div> </nav>

Result as shown below:

## Static Top

To create a navbar that scrolls with the page, add the **.navbar-static-top** class. This class does not require adding padding to the <body>.

## Example

<nav class="navbar navbar-default navbar-static-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">tutorialpro.org</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">Another separated link</a></li> </ul> </li> </ul> </div> </div> </nav>

Result as shown below:

## Inverted Navbar

To create an inverted navbar with a black background and white text, simply add the **.navbar-inverse** class to the **.navbar** class, as shown in the following example:

>

## Example

<nav class="navbar navbar-inverse" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">tutorialpro.org</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">iOS</a></li> <li><a href="#">SVN</a></li>

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        Java <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">jmeter</a></li>
        <li><a href="#">EJB</a></li>
        <li><a href="#">Jasper Report</a></li>
        <li class="divider"></li>
        <li><a href="#">Separate link</a></li>
        <li class="divider"></li>
        <li><a href="#">Another separate link</a></li>
    </ul>
</li>
</ul>
</div>
</div>
</nav>