Bootstrap Tabs

Almost all of the modern websites today incorporate some sort of a menu. A menu basically allow visitors to easily navigate through multiple sections of a website. It takes quite a bit of time and effort to create even a very basic Menu with CSS and HTML. Bootstrap provides multiple options to create eye-catching menus. This article explains how to create menu via bootstrap tabs.

The simplest of the menus is a collection of list items arranged horizontally. To create such a menu in bootstrap, create an un-ordered list and add “list-inline” class to the opening tag. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
              <ul class="list-inline">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Our Team</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Services</a></li>
              </ul>
            
    </body>

</html>

Download the code Try the code

If you open the above code in browser, you should see list items arranged horizontally. This is a basic menu and doesnt look very good. This is where bootstrap tabs come into play.

Creating Menus via Bootstrap Tabs

Creating menus via tabs is extremely simple in bootstrap. You just have to add “nav” and “nav-tabs” classes to the opening tag of the un-ordered list. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
              <ul class="nav nav-tabs">
                <li><a href="#">Home</a></li>
                <li class="active"><a href="#">About</a></li>
                <li><a href="#">Our Team</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Services</a></li>
              </ul>
            
    </body>

</html>

Download the code Try the code

If you run the above code in browser, you should see a nicely styled menu bar containing the list items. The menu bar will have a border at the bottom as well. If you hover over the items, you should see background color changes. Also, you can see the active tab is highlighted by default. This is a basic tabbed menu creates via bootstrap.

Bootstrap Tabs with Dropdown

Tabs menus can also contain drop down lists. This is very similar to dropdown menu we created in one of our previous articles. Take a look at the following example to see how tabs with dropdown menus are created.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
              <ul class="nav nav-tabs">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                  <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Services
                    <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Service 1</a></li>
                      <li><a href="#">Service 2</a></li>
                      <li><a href="#">Service 3</a></li> 
                    </ul>
                  </li>
                <li><a href="#">Our Team</a></li>
                <li><a href="#">Portfolio</a></li>
               
              </ul>
            
    </body>

</html>

Download the code Try the code

If you open the above code in browser and click the services tab, you should see a drop down list appear.

<<< Bootstrap CollapsibleBootstrap Pills >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .