Responsive Navigation Menu using Twitter Bootstrap

In one of my posts, I gave a brief introduction about Twitter Bootstrap, the latest and most widely used front end framework for responsive web design. It is very easy to create a responsive navigation menu that will automatically turn into dropdownlist for devices with smaller screens with twitter bootstrap. If you are new to responsive web design and you do not want to play around with the CSS media queries yourself, you have landed up on the right page because this post aims at explaining how to create responsive navigation menu on the go with twitter bootstrap.

Responsive navigation menu using twitter bootstrap

1. First of all download bootstrap files from here
2. Create an html file and place the 'bootstrap' folder from the download in the same location as this html file. You need 'bootstrap.css','bootstrap.responsive.css' and 'bootstrap.js' files from the download.

3. Copy and paste the below code in the html file you created.

<!DOCTYPE html>
 <title>Responsive Menu - ProgrammingFree</title>
<!-- Mobile viewport optimized -->
  <meta name="viewport" content="width=device-width">
<!-- CSS -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />   
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
 <script src=""></script>
 <script src="bootstrap/js/bootstrap.js" type="text/javascript"></script>

<div class="container-fluid">
<h2>Responsive Navigation Menu using Twitter Bootstrap</h2>
<div class="row-fluid">
<div class="navbar navbar-inverse">
  <div class="navbar-inner">
    <div class="container-fluid">
  <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
  <div class="nav-collapse collapse">
  <ul class="nav">
   <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
   <li><a href="#">Features</a></li>
   <li><a href="">Pricing</a></li>
   <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products<b class="caret"></b></a>
    <ul class="dropdown-menu">
    <li><a href="#">Latest Products</a></li>
    <li><a href="#">Popular Products</a></li>
   <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Membership<b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#">Personal Membership</a></li>
      <li><a href="#">Premium Membership</a></li>
   <li><a href="#">Offers</a></li>
   <li><a href="#">Gallery</a></li>
   <li><a href="#">About Us</a></li>
   <li><a href="#">Contact</a></li>
   <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
    <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    </div><!-- /.nav-collapse -->
    </div><!-- /.container -->
  </div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
<p>Note: Reduce browser window size to see dropdown navigation menu</p>

4. That is it! Open the html file in browser you will see navigation menu as shown below,

After re-sizing the browser window, horizontal navigation menu changes to dropdown navigation as shown below,

Please leave your comments and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts. Thanks for reading!!


advertise here


Trending 3013314375642319006

Post a Comment

  1. Nice tutorial .. but you must install bootstrap by CDN to avoid confusion

    1. Thank you! Yes but for practice and development I prefer having it in my local environment.

    2. ohhh realy nice work.................can u email

  2. This is great, exactly what I needed thank you! After ten years of writing all my own code from scratch and integrating plugins as and when I find them, it's taking a bit of getting used to using Bootstrap, but I am really liking it!

    1. Same here Dave!For newbie's in Web Design like me, I think Twitter Bootstrap is the ideal choice as it is very simple to use and rich in look.

      It also helps web developers to do web designing instantly!

  3. good job thank u v much.......!

    1. hiiiiiii friend i want to know how to easily customize bootstrap responsive menu can u teach me....

  4. Nice tutorial ! ...... Thanx.

  5. How I can get the same result binding menu from a database?

  6. I didn't get menu texts :(

  7. admin can u pls give me ur email id so that i can send the screenshot to u .......i have one problem

    1. Please try to post your problem in any of the technical forums to get immediate help. Whatever I have posted here works, as it is evident from the demonstration you see.


  8. Hi Priya,
    Very nice work, I liked the Menu, thought of using it in my site.
    But it is not working with the latest bootstrap framework.
    Any suggestion to make it to work in the latest bootstrap framework?

    1. I believe it is something to do with 'nav-collapse' ...
      I see 'navbar-collapse' in other examples, working for the latest bootstrap framework.



Currency Converter

Built using AngularJS and ASP.NET Web API