How to make a responsive nav-bar in bootstrap?

Hi Friends...
The navbar is one of the best features of Bootstrap. Navbars are responsive 'meta' components that serve as navigation headers for your application or site. Navbars collapse in mobile views and become horizontal as the available viewport width increases. At its core, the navbar includes styling for site names and basic navigation.

Default Navbar

To create a default navbar:

• Add the classes .navbar, .navbar-default to the <nav> tag.
• Add role="navigation" to the above element, to help with accessibility.
• Add a header class .navbar-header to the <div> element. Include an <a> element with class navbar-brand. This will give the text a slightly larger size.
• To add links to the navbar, simply add an unordered list with the classes of .nav, .navbar-nav.

The following example demonstrate this:

<nav class="navbar navbar-default" role="navigation">

   <div class="navbar-header">

     <a class="navbar-brand" href="http://csharpjadu.blogspot.in/">C# Jadu</a>

   </div>

   <div>

      <ul class="nav navbar-nav">

         <li class="active"><a href="#">HTML</a></li>

         <li><a href="#">CSS</a></li>

         <li class="dropdown">

            <a href="#" class="dropdown-toggle" data-toggle="dropdown">

               SQL 

               <b class="caret"></b>

            </a>

            <ul class="dropdown-menu">

               <li><a href="#">TABLES</a></li>

               <li><a href="#">SP</a></li>

               <li><a href="#">QUERIES</a></li>

              <li class="divider"></li>

               <li><a href="#">OTHERS</a></li>

            </ul>

         </li>

      </ul>

   </div>

</nav>

 Your design will look like this