Navbar Fixed property in Bootstrap

How to fix the navbar at the top or bottom in Bootstrap.

navbar-fixed-top

It is a property which is used to fix the navbar on the top, so that it doesn't scroll with the content of the page.

 <h2>navbar-fixed-top</h2>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">TechFunda</a>
        </div>
        <div>
            <p class="navbar-brand">Authors<span class="caret"></span></p>
        </div>
    </nav>

In the above code snippet we have defined the navbar fixed top in the navbar which sets the navbar on the top

output

navbar-fixed-bottom

It is a property that is used to fix the navbar in the bottom of the page.

<h2>navbar-fixed-bottom</h2>
    <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">TechFunda</a>
        </div>
        <div>
            <p class="navbar-brand">Authors<span class="caret"></span></p>
        </div>
    </nav>

navbar-fixed-bottom

In the above code snippet we have defined the navbar fixed bottom in the navbar which sets the navbar in the bottom

output