It’s the time to create responsive navbar example using bootstrap. This navigation bar automatically adjust according to device screen size no doubt it was completely responsive you can see it in below video demo and you no need of any css or media queries knowledge everything is done by bootstrap. Those who are in web designing field Twitter Bootstrap is the best choice as it is very easy to use, rich in appearance and developers can instantly design their web applications or websites.

Here im installing bootstrap from CDN because to avoid confusion and for IE8 support i included

response.js: This script enable responsive web designs in browsers that don't support CSS3 Media Queries.
html5shim: This is also called as html5shiv don’t be confuse both are same there is no difference between them.


Responsive navbar using bootstrap
<!DOCTYPE html>
<title>Bootstrap Responsive Navbar Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href=""
rel="stylesheet" media="screen"><!-- HTML5 shim and Respond.js IE8 support
   of HTML5 elements and media queries--><!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
    <div class="navbar-header ">
        <button type="button" class="navbar-toggle" data-toggle="collapse" 
            <span class="sr-only">Toggle navigation</span>
            <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="#"><i class="glyphicon glyphicon-home"
            Home</a></li><li><a href="#">Android</a></li>
            <li><a href="#">Java</a></li>
            <li><a href="#">C</a></li>
            <li><a href="#">C++</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Social<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="">Facebook</a></li>
                    <li><a href="">Twitter</a></li>
                    <li><a href="">Google+</a></li>
                    <li><a href="">LinkedIn</a></li>
            <li><a href="#">Python</a></li>
            <li><a href="#">Hardware</a></li>
            <li><a href="#">Graphics</a></li>
            <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Mobiles<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Apple</a></li>
                    <li><a href="#">Samsung</a></li>
                    <li><a href="#">Moto</a></li>
                    <li><a href="#">Nexus</a></li>
            <li><a href="#">Others</a></li>
<!-- End Navigation -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="">
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="">


Post a Comment