Skip to content
Related Articles

Related Articles

Bootstrap DropDowns and Responsive Tabs

Improve Article
Save Article
  • Difficulty Level : Hard
  • Last Updated : 29 Sep, 2022
Improve Article
Save Article
  1. Introduction and Installation
  2. Grid System
  3. Buttons, Glyphicons, Tables
  4. Vertical Forms, Horizontal Forms, Inline Forms
  5. Progress Bar and Jumbotron

Dropdown Menu Using Bootstrap:

In bootstrap, dropdowns are created using the class=”dropdown”. What we will do is create a button and then convert the button into a dropdown.
As already stated in the last few tutorials, buttons can be created using the <button> tag. But in this button, we want to create a dropdown, so we will add the class=”btn dropdown-toggle” and data-toggle=”dropdown”.

Basically, it would look something like this.

<button class=”btn btn-default dropdown-toggle” type=”button” data-toggle=”dropdown”> My Dropdown </button>

Now we want to convert this button into a dropdown. So, we’ll create an unordered list using the <ul> tag having class=”dropdown-menu” and add items using the <li> tag .

Example: 

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" 
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
</head>
<body>
    <div class="container" style="color:green">
        <h1>GeeksforGeeks</h1>
    </div>
    <div class="container">
        <h4>Dropdown in Bootstrap</h4>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="dropdown">
                    <button class="btn btn-success dropdown-toggle" 
                        type="button" data-toggle="dropdown">
                        GeeksforGeeks
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">JavaScript</a></li>
                        <li><a href="#">SQL</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
</html>


Output:

 Bootstrap DropDowns and Responsive Tabs

You can make your dropdown better by using classes in the <li> tag. To add a header in a dropdown add class=”dropdown-header”, to add a divider between items, use class=”divider” and to disable an item in the list, use class=”disabled”.

Example: 

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" 
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
</head>
<body>
    <div class="container" style="color:green">
        <h1>GeeksforGeeks</h1>
    </div>
    <div class="container">
        <h4>Dropdown in Bootstrap</h4>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="dropdown">
                    <button class="btn btn-success dropdown-toggle" 
                        type="button" data-toggle="dropdown">
                        GeeksforGeeks
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li class="drodown-header container">
                            <b>HTML</b>
                        </li>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">JS</a></li>
                        <li class="divider"></li>
                        <li class="drodown-header container">
                            <b>Language</b>
                        </li>
                        <li><a href="#"></a></li>
                        <li><a href="#">Python</a></li>
                        <li><a href="#">SQL</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
</html>


Output:

 Bootstrap DropDowns and Responsive Tabs 

Navigation Tabs using Bootstrap:

To create a tabbed navigation menu, we need to make an unordered list using the <ul> tag and then add class=”nav nav-tabs”. Now we can add our tabs using the <li> tag. Remember assigning one tab with class=”active” to view it as the default active tab. Now, we need to write the content of each tab using the class=”tab-pane” within the class=” tab-content”. Note that you must assign ids to the respective tab-pane.
Adding the class=”fade” adds a fading effect when the tabs are switched.

Example: 

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" 
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
</head>
<body>
    <div class="container" style="color:green">
        <h1>GeeksforGeeks</h1>
    </div>
    <div class="container">
        <h4>Navigation Tabs in Bootstrap</h4>
    </div>
    <div class="container">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">
                        Nav bar
                    </a>
                </div>
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="#">Home</a>
                    </li>
                    <li><a href="#">Practice</a></li>
                    <li><a href="#">Interviews</a></li>
                    <li><a href="#">Contribute</a></li>
                </ul>
            </div>
        </nav>
    </div>
</body>
</html>


Output:

You can change the look and feel of the tabs by changing the class=”navbar-nav” to “nav-pills” or “nav-stacked” and if you want your tabs to cover the whole screen then, try adding the class=”nav-justified”
Similar to Dropdowns, we can disable any tab using class=”disabled”.

Output:

 Bootstrap DropDowns and Responsive Tabs

Note: Be careful during the use of nav-bar it will change its size depending on the screen size.


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!