Bootstrap navbar component

Bootstrap navbar component is useful for creating responsive navigation header for a website. By responsive, we mean that the navbar is collapsed on small screen size devices like mobile phones. When the toggle button is clicked the navbar expands. However, on large screen devices like laptops and desktops, where we have enough room to display the entire navbar, it appears normal. 

Bootstrap tutorial for beginners

Creating responsive navbar : The navbar appears normal on a large screen size devices like laptops, desktops etc. 
bootstrap navbar examples 

The navbar appears collapsed on a small screen size devices like mobile phones, portrait tablets etc. The navbar expands when the toggle button is clicked. 
bootstrap 3 navbar examples 

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Products</a></li>
        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search" />
            <button type="submit" class="btn btn-default">Submit</button>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Subscribe</a></li>

Useful nvabar classes 
navbar-inverseModifies the look of the navbar by creating an inverted variation of it
navbar-fixed-topCreates navbar that is fixed on the top of the page
navbar-fixed-bottomCreates navbar that is fixed at the bottom of the page

Please note : 
1. To center and pad navbar content use container or container-fluid classes. 
2. The fixed navbar may cause some of the page content on the top or bottom invisible. To push the content up or down add padding to the top or bottom of the <body> element.