Bootstrap Navigation Bar With Toggle Button

Navigation Bar are mainly used to provide direction to the users/visitors. To create a Bootstrap Navigation Bar with a Toggle button is very simple and easy.

Step 1

<ul>
    <li>
        <a href="http://www.yoursitename.com/Home">Home</a>
    </li>
    <li>
        <a href="http://www.yoursitename.com/EleK">Electronics</a>
    </li>
    <li>
        <a href="http://www.yoursitename.com/Books">Books</a>
    </li>
    <li>
        <a href="http://www.yoursitename.com/BustiK">Bustickets</a>
    </li>
</ul>

Output

 

Step 2

<ul class="nav navbar-nav">
    <li>
        <a href="http://www.yoursitename.com/Home">Home</a>
    </li>
    <li>
        <a href="http://www.yoursitename.com/EleK">Electronics</a>
    </li>
    <li>
        <a href="http://www.yoursitename.com/Books">Books</a>
    </li>
    <li>
        <a href="http://www.yoursitename.com/BustiK">Bustickets</a>
    </li>
</ul>

Output

Step 3

<div class="navbar-header">
    <span class="navbar-brand">King's Kart</span>
</div>
<div >
    <ul class="nav navbar-nav">
        <li>
            <a href="http://www.yoursitename.com/Home">Home</a>
        </li>
        <li>
            <a href="http://www.yoursitename.com/EleK">Electronics</a>
        </li>
        <li>
            <a href="http://www.yoursitename.com/Books">Books</a>
        </li>
        <li>
            <a href="http://www.yoursitename.com/BustiK">Bustickets</a>
        </li>
    </ul>

Output

Step 4

<div class="navbar-header">
    <span class="navbar-brand">King's Kart</span>
</div>
<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li>
            <a href="http://www.yoursitename.com/Home">Home</a>
        </li>
        <li>
            <a href="http://www.yoursitename.com/EleK">Electronics</a>
        </li>
        <li>
            <a href="http://www.yoursitename.com/Books">Books</a>
        </li>
        <li>
            <a href="http://www.yoursitename.com/BustiK">Bustickets</a>
        </li>
    </ul>
</div>

Output

 

 

Step 5

<div class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
        <span class="navbar-brand">King's Kart</span>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li>
                <a href="http://www.yoursitename.com/Home">Home</a>
            </li>
            <li>
                <a href="http://www.yoursitename.com/EleK">Electronics</a>
            </li>
            <li>
                <a href="http://www.yoursitename.com/Books">Books</a>
            </li>
            <li>
                <a href="http://www.yoursitename.com/BustiK">Bustickets</a>
            </li>
        </ul>
    </div>

Output

Step 6

<div class="navbar navbar-inverse" role="navigation">
    <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>
        </button>
        <span class="navbar-brand">King's Kart</span>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li>
                <a href="http://www.yoursitename.com/Home">Home</a>
            </li>
            <li>
                <a href="http://www.yoursitename.com/EleK">Electronics</a>
            </li>
            <li>
                <a href="http://www.yoursitename.com/Books">Books</a>
            </li>
            <li>
                <a href="http://www.yoursitename.com/BustiK">Bustickets</a>
            </li>
        </ul>
    </div>
</div>

Output

 

 

Step 7

<div class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myidname">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <span class="navbar-brand">King's Kart</span>
    </div>
    <div class="navbar-collapse collapse" id="myidname">
        <ul class="nav navbar-nav">
            <li>
                <a href="http://www.yoursitename.com/Home">Home</a>
            </li>
            <li>
                <a href="http://www.yoursitename.com/EleK">Electronics</a>
            </li>
            <li>
                <a href="http://www.yoursitename.com/Books">Books</a>
            </li>
            <li>
                <a href="http://www.yoursitename.com/BustiK">Bustickets</a>
            </li>
        </ul>
    </div>

Output

 

 

I will combined all the preceding 7 steps into a single HTML file.

 

BootstrapNav.hmtl

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <meta name="viewport" content="width=device-width, initial-scale=1">
                    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
                    <title>Bootstrap Navigation with Toggle Button</title>
                    <!-- Bootstrap -->
                    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
                        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
                        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
                        <!--[if lt IE 9]>
                        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
                        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
                        <![endif]-->
                    </head>
                    <body>
                        <div class="navbar navbar-inverse" role="navigation">
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myidname">
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                                <span class="navbar-brand">King's Kart</span>
                            </div>
                            <div class="navbar-collapse collapse" id="myidname">
                                <ul class="nav navbar-nav">
                                    <li>
                                        <a href="http://www.yoursitename.com/Home">Home</a>
                                    </li>
                                    <li>
                                        <a href="http://www.yoursitename.com/EleK">Electronics</a>
                                    </li>
                                    <li>
                                        <a href="http://www.yoursitename.com/Books">Books</a>
                                    </li>
                                    <li>
                                        <a href="http://www.yoursitename.com/BustiK">Bustickets</a>
                                    </li>
                                </ul>
                            </div>
                            <!-- jQuery (necessary for Bootstrap's JavaScript plugins)   Order is important -->
                            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
                            <!-- Include all compiled plugins (below), or include individual files as needed -->
                            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
                    </body>
</html>

OUTPUT

 

 

 

 

Reference: http://getbootstrap.com/