Table of contents
1.
Introduction
2.
What is Bootstrap
3.
Bootstrap Dropdown
4.
Bootstrap Dropdown Plugin
5.
Toggle Hidden Content
5.1.
Data Attributes
5.2.
Data Target Attributes
5.3.
Javascript
5.4.
Example 1
5.5.
Output
5.6.
Example 2
5.7.
Output
5.8.
Explanation
6.
Dropdown in the Navbar
6.1.
Implementation
6.2.
Explanation
6.3.
Output
7.
Dropdown with Tabs
7.1.
Implementation
7.2.
Explanation
7.3.
Output
8.
Event in Bootstrap Dropdown
8.1.
Implementation
8.2.
Explanation
8.2.1.
Output
9.
Method in Bootstrap Dropdown
9.1.
Implementation
9.2.
Explanation
9.2.1.
Output
10.
Option in Bootstrap Dropdown
10.1.
Implementation
10.2.
Explanation
10.2.1.
Output
11.
Frequently Asked Questions
11.1.
What is Bootstrap?
11.2.
How to include plugins?
11.3.
Name the different types of plugins in bootstrap?
11.4.
What are bootstrap dropdowns?
11.5.
What is the use of bootstrap dropdown plugins?
12.
Conclusion
Last Updated: Mar 27, 2024
Easy

Bootstrap Dropdown Plugin

Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

Bootstrap is the most popular CSS(Cascading Style Sheets) framework. It is used to develop responsive websites. Bootstrap provides us with easy ways to style websites, and it is significantly less verbose. 

introduction

This article will discuss the dropdown plugin available in Bootstrap's dropdown class. We will also learn about the usage, methods, and events when working with Bootstrap and also see about its implementation.

What is Bootstrap

what is bootstrap

Bootstrap is a free front-end framework for developing responsive websites and web applications. It contains CSS and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components, as well as optional JavaScript plugins. Bootstrap is open-source and can be used by developers to build custom websites and applications.

Bootstrap also includes partial Javascript support in plugins which helps in components like user interface. The bootstrap overview also consists of the history of bootstrap, so let's discuss it in the next section.

Bootstrap Dropdown

Dropdowns are toggleable, contextual overlays. These plugins are used for displaying lists of links. We can also make them interactive by including a bootstrap dropdown Javascript plugin. The dropdowns are built on a third-party library named Popper.js. This library provides viewport(User visible area in a webpage) detection and dynamic positioning. So, we must include popper.min.js before using bootstrap.bundle.min.js or bootstrap.bundle.js or Bootstrap's Javascript. The Popper.js library does not position dropdown in navbars, as dynamic positioning isn't required.

If you're building your JavaScript from the source, it requires util.js.

Bootstrap Dropdown Plugin

Using the Dropdown plugin, you can add dropdown menus to any components like navbars, tabs, pills, and buttons.

dropdown plugin

If you want to include this plugin functionality individually, you will need dropdown.js. As mentioned in the Bootstrap Plugins Overview, you can include bootstrap.js or the  minified bootstrap.min.js.
 

These plugins can be added to our project in two ways:

  • Individual Files: We can include each plugin individually with *.js files. But one thing we need to take care of while including individual plugin files is that if it is associated with another plugin then we need to add that file as well.
     
  • Compiled: We can include all the plugins at once using bootstrap.bundle.js or bootstrap.bundle.min.js. 
     

Include the below <script> tag at the end of your <body> tag right before the closing </body>tag in HTML to include the Compiled version of plugins.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

Toggle Hidden Content

You can toggle the dropdown plugin's hidden content in three ways. These are−

Data Attributes

We need to add data-toggle = "dropdown" to a link or button to toggle a dropdown, as shown below −

<div class = "codingninjas">
    <a data-toggle = "dropdown" href = "#">Dropdown Options</a>
    <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
    ...
    </ul>
</div>

Data Target Attributes

If you need to keep links intact (which is useful if the browser is not enabling JavaScript), use the data-target attribute instead of href = "#". It can be done in the following way - 

<div class = "codingninjas">
    <a id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html"> Dropdown Options </a>
    <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
    ..
    </ul>
</div>

Javascript

To call the dropdown toggle via JavaScript, use the following method

$('.dropdown-toggle').dropdown().

Example 1

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">

    <!-- Dropdown creation -->
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Options
      </button>
      <!-- Dropdown menu -->
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Option 1</a></li>
        <li><a class="dropdown-item" href="#">Option 2</a></li>
        <li><a class="dropdown-item" href="#">Option 3</a></li>
      </ul>
    </div>
  </body>
</html>

Output

output of example 1

Example 2

We can make it more colour full by adding buttons and color into it.

<!doctype html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
   <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
   <title>Bootstrap Example</title>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
 </head>
 <body class="p-3 m-0 border-0 bd-example">
   <h1>Hello, Ninja!</h1>
   <button  class="btn btn-info">Hello Ninja !</button>
   <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     Action
     
     <div class="dropdown-menu">
       <a class="dropdown-item" href="#">Coding Ninja</a>
       <a class="dropdown-item" href="#">Coding Ninjas Studio</a>
       <a class="dropdown-item" href="#">Content </a>
       <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#"> Best Blog</a>
       </div>
     </div>
   </button>
 </body>
</html>

Output

output of example 2

Explanation

The first line is heading with the text "Hello, Ninja!" wrapped in an H1 tag. The next line has a button element with the text "Hello Ninja!" and a class of "btn btn-info".

The final block of code is a button group using Bootstrap classes. It has two buttons, one with the text "Action" and a class of "btn btn-danger", and another button with a dropdown arrow and the classes "btn btn-danger dropdown-toggle dropdown-toggle-split". Clicking on the dropdown button will reveal a dropdown menu with several links, including "Coding Ninja", "Coding Ninjas Studio", "Content", and "Best Blog". The links are wrapped in anchor tags with a class of "dropdown-item". There is also a divider line within the dropdown menu with a class of "dropdown-divider".

Dropdown in the Navbar

Below is the implementation of for the dropdown in the navbar. It usually implements for the Head Bar.

Implementation

<!DOCTYPE html>
<html>
 <head>
   <title>Bootstrap Navbar 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.1/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
 </head>
 <body>
   <nav class="navbar navbar-inverse">
     <div class="container-fluid">
       <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
         </button>
        
       </div>
       <div class="collapse navbar-collapse" id="myNavbar">
         <ul class="nav navbar-nav">
           <li><a href="#">Coding Ninja</a></li>
           <li class="dropdown">
             <a class="dropdown-toggle" data-toggle="dropdown" href="#">Courses <span class="caret"></span></a>
             <ul class="dropdown-menu">
               <li><a href="#">DSA</a></li>
               <li><a href="#">Web Devlopment</a></li>
               <li><a href="#">MERN Stack</a></li>
             </ul>
           </li>
           <li><a href="#">About Us</a></li>
           <li><a href="#">Contact Us</a></li>
         </ul>
       </div>
     </div>
   </nav>
   <br>
   <br>
   <br>
   <br>
   <h1><a class="navbar-brand" href="#">Hello Ninja. This is example of dropdown in navbar</a></h1>
 </body>
</html>

Explanation

The nav element with the navbar and navbar-inverse classes creates the basic navbar structure. The navbar-header and navbar-brand classes define the website logo and name. The collapse and navbar-collapse classes create the hamburger menu for smaller screens.

The nav navbar-nav class creates a horizontal list of links. The dropdown class creates a dropdown menu. The dropdown-toggle class creates the button to activate the dropdown menu. The dropdown-menu class creates the menu items. The caret class creates a down arrow next to the dropdown button.

Output

Output of Navbar Dropdown


Dropdown with Tabs

Here in this section we will try to make two separate dropdown with tabs. Below is the implementation.

Implementation

<!DOCTYPE html>
<html>
<head>
 <title>Dropdown with Tabs Example</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 <div class="container-fluid">
   <h2> Hello Ninja. This is Example of Dropdown with Tabs.</h2>
   <ul class="nav nav-tabs">
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown 1</a>
       <div class="dropdown-menu">
         <a class="dropdown-item" href="#">Tab 1</a>
         <a class="dropdown-item" href="#">Tab 2</a>
       </div>
     </li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown 2</a>
       <div class="dropdown-menu">
         <a class="dropdown-item" href="#">Tab 3</a>
         <a class="dropdown-item" href="#">Tab 4</a>
       </div>
     </li>
   </ul>
 </div>
</body>
</html>

Explanation

  • container-fluid: This class is used to create a container that spans the full width of the screen.
  • nav: This class is used to create a navigation bar.
  • nav-tabs: This class is used to create a set of tabs in the navigation bar.
  • nav-item: This class is used to define an item in the navigation bar.
  • dropdown: This class is used to create a dropdown menu.
  • nav-link: This class is used to define a clickable link in the navigation bar.
  • dropdown-toggle: This class is used to make the link toggle the dropdown menu.
  • dropdown-menu: This class is used to create the dropdown menu that appears when the link is clicked.
  • dropdown-item: This class is used to define an item in the dropdown menu.

Output

Output of Dropdown with tabs

Event in Bootstrap Dropdown

  • show.bs.dropdown: This event is fired immediately when the dropdown is about to be shown.
     
  • shown.bs.dropdown: This event is fired after the dropdown is shown.
     
  • hide.bs.dropdown: This event is fired immediately when the dropdown is about to be hidden.
     
  • hidden.bs.dropdown: This event is fired after the dropdown is hidden.
     

Below is an example of using the "show.bs.dropdown" event in the Bootstrap Dropdown Plugin:

Implementation

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Dropdown Plugin 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/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown button
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </div>
     
     

<script>
$(document).ready(function() {
  $('.dropdown').on('show.bs.dropdown', function() {
    console.log('Dropdown is about to be shown.');
  });
});


</script>

</body>
</html>

Explanation

In this example, we are using the "on" method to attach a "show.bs.dropdown" event handler to the dropdown element. When the dropdown is about to be shown, the event handler will log a message to the console.

Output

Output

Method in Bootstrap Dropdown

  • toggle: This method toggles the visibility of the dropdown menu.
     
  • show: This method shows the dropdown menu.
     
  • hide: This method hides the dropdown menu.
     
  • update: This method updates the position and size of the dropdown menu.
     

Below is an example of using the "toggle" method in the Bootstrap Dropdown Plugin:

Implementation

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Dropdown Plugin 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/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown button
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </div>
<script>
$(document).ready(function() {
  $('#dropdownMenuButton').click(function() {
    $('.dropdown-menu').toggle();
  });
});

</script>

</body>
</html>

Explanation

In this example, we are attaching a "click" event handler to the dropdown button. When the button is clicked, the "toggle" method is called on the ".dropdown-menu" element, which toggles its visibility.

Output

Output

Option in Bootstrap Dropdown

  • offset: This option allows developers to specify the offset of the dropdown menu from the trigger element. It takes an array with two values, representing the horizontal and vertical offset.
     
  • flip: This option allows the dropdown menu to flip automatically if it is clipped by an overflow. It can be set to "true" or "false".
     
  • boundary: This option allows developers to specify the element that serves as the boundary of the dropdown menu. It takes a selector string or an element.
     

Below is an example of using the offset option in the Bootstrap Dropdown Plugin:

Implementation

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Dropdown Plugin 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/4.5.2/css/bootstrap.min.css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="dropdown">
      <button
        class="btn btn-secondary dropdown-toggle"
        type="button"
        id="dropdownMenuButton"
        data-toggle="dropdown"
        aria-haspopup="true"
        aria-expanded="false"
      >
        Dropdown button
      </button>
      <div
        class="dropdown-menu"
        aria-labelledby="dropdownMenuButton"
        data-offset="10,20"
      >
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </div>

    <script></script>
  </body>
</html>

Explanation

In this example, we are using the data-offset attribute to set the offset for the dropdown menu. The offset is specified as two comma-separated values that represent the horizontal and vertical distance between the dropdown button and the menu.

Output

Output

Now, let’s discuss some Frequently Asked Questions.

Frequently Asked Questions

What is Bootstrap?

Bootstrap is a free & open-source CSS framework that aims to be a mobile-first front-end web development framework. It contains CSS & JavaScript-based interface components and design templates like forms, buttons, navbar, and many more.

How to include plugins?

Plugins can be added to our project in two ways. These are Individual Files and Compiled Files. 

Name the different types of plugins in bootstrap?

There are more than ten different plugins. Some of them are - Transition, Modal, Tooltip, Alert, Popover, Affix, etc. 

What are bootstrap dropdowns?

Dropdowns are toggleable, contextual overlays. These plugins are used for displaying lists of links. We can also make them interactive by including a bootstrap dropdown Javascript plugin.

What is the use of bootstrap dropdown plugins?

Using the Dropdown plugin you can add dropdown menus to any components like navbars, tabs, pills, and buttons.

Conclusion

We have learned about the dropdown in Bootstrap. We also learned about the dropdown plugins in Bootstrap. We also learned about the different methods and events of the dropdown plugin in Bootstrap. This article also explained the implementation of the usage of the dropdown plugin available in Bootstrap.

You can refer to other such articles using the below links:

  1. Bootstrap Transition Plugin
  2. Bootstrap- Scrollspy Plugin
  3. Bootstrap -Tooltip Plugin
  4. Bootstrap Accordion
     

Please refer to our guided paths on Coding Ninjas Studio to learn more about DSACompetitive ProgrammingJava Programming, and System Design, etc. Have a look at the interview experiences and interview bundle for placement preparations. And also, enrol in our courses and refer to the mock test and problems available.

Happy Learning!

Live masterclass