Menu in Bootstrap

Twitter Bootstrap provides built-in CSS that makes it very quick and easy to add clean and functional interface elements to your page. Using Twitter Bootstrap, you may create static navigation menus.

In this article we use some built-in CSS to make a simple menu for your website.
Using Twitter Bootstrap, you may create static navbar. - See more at: http://www.w3resource.com/twitter-bootstrap/navbar-tutorial.php#sthash.8Za94Odc.dpuf

What is Bootstrap?

Twitter Bootstrap was created by two guys at Twitter who wanted to speed up and bootstrap their workload and code. The Bootstrap framework is used to develop front facing web applications and sites. When we work on the project there are many things that are required in nearly every project. For example a Grid, Tables, Forms, Buttons and so on. These are the common requirements of any project. With these you can get a web project up and running quickly and easily. The Bootstrap framework provides you all those components. The entire framework is module based, you can customize it with your own bit of CSS. It also provides JavaScript plugins for things like tooltips, popovers, modals and more.

To learn more about bootstrap: Introduction to Bootstrap

Calling Bootstrap in HTML

Now let's call Bootstrap in our HTML.

Let’s assume, we have a blank HTML. Something like this:

HTML file

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
    <head>
         <title></title>
    </
head>

   <body>

   </body>

</html>

Now we need to add a reference to the bootstrap CSS file and JavaScript file in our HTML file. The following code adds reference to JQuery and two Bootstrap js files.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

     <head>

           <title></title>

        <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

        <link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />

        <script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

         </head>

      <body>           

     </body>

</html>

Note: Also don’t forget to include jQuery, if you’ll be using Bootstraps JS plugins.

Creating Menu using Bootstrap

To create a menu in Bootstrap, open the bootstrap.css file and check out how Bootstrap styles each component.

  1. navbar-inverse
  2. Container class
  3. navbar-nav

Now first we create a list using ul and li tags.

The HTML file looks like the following:
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

    <title></title>

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    <link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />

    <script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

</head>

<body>

    <ul>

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

        <li><a href="#about">Technologies</a></li>

        <li><a href="#contact">Article</a></li>

        <li><a href="#contact">blog</a></li>

        <li><a href="#contact">News</a></li>

    </ul>

</body>

</html>

HTML will render without Bootstrap like the following.

List in HTML 

1. Using bootstrap CSS class="navbar-inverse" 

You now need to add the navbar-inverse class.

Now open the bootstrap.css file and find the .navbar-inverse class. It looks like this. This is where we can 

.navbar-inverse {

  background-color: #222222;

  border-color: #080808;

}

 

Now we want to change the background-color with "background-color: #0029ff".
 

.navbar-inverse {

  background-color: #0029ff;

  border-color: #080808;

}

Once our changes are done in CSS, the new changes should be applied to HTML.

 Here is the final HTML look like that use the navbar-inverse.
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

    <title></title>

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    <link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />

    <script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

</head>

<body>  

        <div class="navbar-inverse">

            <ul>

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

                <li><a href="#about">Technologies</a></li>

                <li><a href="#contact">Article</a></li>

                <li><a href="#contact">blog</a></li>

                <li><a href="#contact">News</a></li>

            </ul>      

    </div>

</body>

</html>

To add a container, the following code uses the Container class to create a container to host the menu.

navbar-inverse Class

2. Using bootstrap CSS class="Container"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

    <title></title>

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    <link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />

    <script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

</head>

<body>  

    <div class="navbar-inverse">

    <div class="Container">                  

                <ul>

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

                    <li><a href="#about">Technologies</a></li>

                    <li><a href="#contact">Article</a></li>

                    <li><a href="#contact">blog</a></li>

                    <li><a href="#contact">News</a></li>

                </ul>           

        </div>

    </div>

</body>

</html>

The HTML applies nav-bar-nav.

Container class 

 

2. Using bootstrap CSS class="navbar-nav"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

    <title></title>

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    <link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />

    <script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

</head>

<body>

    <div class="navbar-inverse">

  <div class="Container">                  

                <ul class="nav navbar-nav">

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

                    <li><a href="#about">Technologies</a></li>

                    <li><a href="#contact">Article</a></li>

                    <li><a href="#contact">blog</a></li>

                    <li><a href="#contact">News</a></li>

                </ul>           

        </div>

    </div>

</body>

</html>

 
The final menu looks like the following.
 
navbar-nav class 

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now