Bootstrap Navigation Bar

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

Default Navigation Bar

To create a default navigation bar, 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 navigation bar, simply add an unordered list with the classes .nav and .navbar-nav.

Here is an example demonstrating 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="#">Separate link</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Another separate link</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>

The result is as follows:

Responsive Navigation Bar

To add responsive features to the navigation bar, the content you want to collapse must be wrapped in a <div> with the classes .collapse and .navbar-collapse. The collapsed navigation bar is essentially a button with the class .navbar-toggle and two data elements. 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 will toggle the elements in the .nav-collapse <div>. To achieve these functionalities, you must include the Bootstrap Collapse plugin.

Here is an example demonstrating 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. The .navbar-btn class can also be applied to <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 the Navbar

If you need to include text strings in the navigation, use the class .navbar-text. This is commonly 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 icon. For more, see Bootstrap Icons, as shown in the following example:

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> Register</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 align components like navigation links, forms, buttons, or text in the navbar to the left or right using the utility classes .navbar-left or .navbar-right. Both classes add CSS floats 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</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> </div> </div> </nav>

<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 where it is placed 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 to be 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 to be 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 is as follows:

## Static Top

To create a navigation bar 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 is as follows:

## Inverted Navigation Bar

To create an inverted navigation bar 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>