Bootstrap DropDowns and Responsive Tabs
Last Updated :
20 Feb, 2023
- Introduction and Installation
- Grid System
- Buttons, Glyphicons, Tables
- Vertical Forms, Horizontal Forms, Inline Forms
- 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>
Note: data- toggle attribute has been replaced with data-bs-toggle in Bootstrap. So, to run the below code with Bootstrap 5 makes sure to replace data-toggle with data-bs-toggle.
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=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
</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:

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=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
</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="dropdown-header container">
<b>HTML</b>
</li>
<li><a href="#">CSS</a></li>
<li><a href="#">JS</a></li>
<li class="divider"></li>
<li class="dropdown-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:
Navigation Tabs using Bootstrap:
To create a tabbed navigation menu, we need to make an unordered list using the <ul> tag and add class="nav nav-tabs". Now we can add our tabs using the <li> tag. Remember to assign 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=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
</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:

Note: Be careful during the use of nav-bar it will change its size depending on the screen size.
Similar Reads
BootStrap Introduction and Installation
To begin Web development you may go through this article first. Grid SystemButtons, Glyphicons, TablesVertical Forms, Horizontal Forms, Inline FormsDropDowns and Responsive TabsProgress Bar and JumbotronBootstrap is a free and open-source collection of tools for creating websites and web application
4 min read
Bootstrap Grid System
Introduction and Installation Buttons, Glyphicons, Tables Vertical Forms, Horizontal Forms, Inline Forms DropDowns and Responsive Tabs Progress Bar and Jumbotron Prerequisites: Web Development Basics and  BootStrap (Part-1) Grid System: In the previous article we had learnt about Bootstrap and its I
7 min read
Bootstrap Buttons, Glyphicons, Tables
After the previous article, one should be familiar with the Grid System of Bootstrap. Now, we'll learn about making Buttons, the all-new Glyphicons and Tables. Let's get started.Bootstrap ButtonsBootstrap buttons provide a quick way to create consistent and responsive buttons using predefined classe
3 min read
Bootstrap Forms Alignment Types
Bootstrap Forms are pre-styled HTML forms provided by the Bootstrap framework. They streamline the process of creating aesthetically pleasing and responsive forms by offering a range of ready-to-use components, layouts, and styles, ensuring consistency and efficiency in web development. Bootstrap Fo
3 min read
Bootstrap DropDowns and Responsive Tabs
Introduction and InstallationGrid SystemButtons, Glyphicons, TablesVertical Forms, Horizontal Forms, Inline FormsProgress 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 in
3 min read
Bootstrap Progress Bar and Jumbotron
BootStrap articles : Introduction and Installation Grid System Buttons, Glyphicons, Tables Vertical Forms, Horizontal Forms, Inline Forms DropDowns and Responsive Tabs Progress Bar We all have seen a progress bar while executing some process in our computer. A progress bar shows how much of the proc
2 min read
Bootstrap Alerts , Wells, Pagination and Pager
Introduction and InstallationGrid SystemButtons, Glyphicons, TablesVertical Forms, Horizontal Forms, Inline FormsDropDowns and Responsive TabsProgress Bar and Jumbotron Alerts: We often see certain alerts on some websites before or after completing an action. These alert messages are highlighted tex
4 min read
Bootstrap Badges, Labels, Page Headers
Introduction and InstallationButtons, Glyphicons, TablesVertical Forms, Horizontal Forms, Inline FormsDropDowns and Responsive TabsProgress Bar and Jumbotron Badges: We all have seen some numerical indicators beside some links on various websites. These are called badges. These badges tell how many
3 min read
Bootstrap Tooltips
In this article, we would be discussing the tooltip plugin provided by bootstrap. Tooltip is quite useful for showing the description of different elements in the webpage. Tooltip can be invoked on any element in a webpage. Tooltips on bootstrap depends on the 3rd party library Tether for positionin
4 min read
Bootstrap Navigation Bar
Bootstrap Navigation Bar provides a responsive, customizable, and pre-styled navigation component for web applications. It incorporates features like branding, navigation links, dropdowns, and responsiveness, enabling developers to create effective and visually appealing navigation menus effortlessl
6 min read