🤩 New Cool Developer Tools for you. Explore →
FREE JavaScript Video Series Start Learning →
FLAT 75% OFF All Interactive courses at flat ₹250 / $3.25 only. HURRRRRY!! Explore now
  Signup/Sign In
Tests
MCQs to test your knowledge.
Forum
Engage with the community.
Compilers
Compilers to execute code in browser.
Index
PUBLISHED ON: MAY 7, 2021

Bootstrap Dropdown

A drop-down is like a list box that shows only one item when inactive. when we click on it it shows the full list. Bootstrap provides one such component called Bootstrap dropdown. It is toggleable and has a predefined list of items that can be selected on clicking. Java plugins and popper is used to build Bootstrap dropdown.

Creating Bootstrap Dropdown

  • To create a dropdown include the .dropdown class in your code.
  • Use .dropdown-toggle and .data-toggle="dropdown" with <a> or <button> tag before dropdown-menu class.
  • Include .dropdown-menu class under <div> tag to create dropdown menu.
  • To add items in the dropdown menu, use .dropdown-item class inside <a> or <button> tag.

Example: Creating dropdown using Bootstrap

Here is a program to create a basic dropdown button menu. For creating a dropdown menu include the .dropdown class and add a button within the dropdown class. Include .dropdown-menu within the .dropdown class and add items to it.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	
     <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <title>Bootstrap 4 </title>
  </head>
  <body>
   <div class="container">
    <h2> Dropdown </h2>
    <div class="dropdown">
      <button class="btn btn-primary 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="#">item1</a>
        <a class="dropdown-item" href="#">item 2</a>
        <a class="dropdown-item" href="#">item 3</a>
      </div>
    </div>
   </div>
  </body>
</html>

Output:

Here is the output showing the basic dropdown button menu.

Dropdown

Bootstrap Dropdown Link

For creating a dropdown link menu replace <button> to <a> tag under class .dropdown.

Example: Creating dropdown link menu using Bootstrap

In the previous example, the button was used to create a dropdown menu. Link can also be used to create a dropdown menu. Just replace <button> with <a> element.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	
     <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <title>Bootstrap 4 </title>
  </head>
  <body>
   <div class="container">
    <h2> Dropdown </h2>
    <div class="dropdown">
      <a class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown Link
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#">item1</a>
        <a class="dropdown-item" href="#">item 2</a>
        <a class="dropdown-item" href="#">item 3</a>
      </div>
    </div>
   </div>
  </body>
</html>

Output:

Here is the output showing the dropdown link.

Dropdown link

Example: Creating split button using bootstrap

  • You can experiment with buttons and add any variant of .btn to create dropdown buttons.
  • Add .dropdown-toggle-split for proper spacing around buttons.
  • .dropdown-toggle-split reduces horizontal padding by 25% and also removes the left margin
  • For adding more than one dropdown menu buttons use .btn-group instead of .dropdown class

Here is a program to create split buttons using contextual buttons.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	
     <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <title>Bootstrap 4 </title>
	
  </head>
  <body>
   <div class="container">
    <h2> Dropdown Button </h2>
    <div class="btn-group">
      <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#">item1</a>
        <a class="dropdown-item" href="#">item 2</a>
        <a class="dropdown-item" href="#">item 3</a>
      </div>
    </div>
	
	<div class="btn-group">
      <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#">item1</a>
        <a class="dropdown-item" href="#">item 2</a>
        <a class="dropdown-item" href="#">item 3</a>
      </div>
    </div>
	
	<div class="btn-group">
      <button class="btn btn-info dropdown-toggle dropdown-toggle-split" type="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#">item1</a>
        <a class="dropdown-item" href="#">item 2</a>
        <a class="dropdown-item" href="#">item 3</a>
      </div>
    </div>
	
	<div class="btn-group">
      <button class="btn btn-danger dropdown-toggle dropdown-toggle-split" type="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#">item1</a>
        <a class="dropdown-item" href="#">item 2</a>
        <a class="dropdown-item" href="#">item 3</a>
      </div>
    </div>
	
	<div class="btn-group">
      <button class="btn btn-success dropdown-toggle dropdown-toggle-split" type="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#">item1</a>
        <a class="dropdown-item" href="#">item 2</a>
        <a class="dropdown-item" href="#">item 3</a>
      </div>
    </div>
	
	<div class="btn-group">
      <button class="btn btn-warning dropdown-toggle dropdown-toggle-split " type="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#">item1</a>
        <a class="dropdown-item" href="#">item 2</a>
        <a class="dropdown-item" href="#">item 3</a>
      </div>
    </div>
   </div>
  </body>
</html>

Output:

Split button

Bootstrap Sizing

You can add dropdown buttons with different sizes. For creating large buttons use the .btn-lg class. For small buttons use the .btn-sm class.

Example: Specifying sizing to buttons using Bootstrap

Here is a program to create different size buttons. Here we have included buttons of three different sizes(large, medium, small).

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	
     <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <title>Bootstrap 4 </title>
	
  </head>
  <body>
   <div class="container">
    <h2> Dropdown Button </h2>
    <div class="btn-group">
      <button class="btn btn-primary btn-lg dropdown-toggle" type="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown large button
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#">item1</a>
        <a class="dropdown-item" href="#">item 2</a>
        <a class="dropdown-item" href="#">item 3</a>
      </div>
    </div>
	<div class="btn-group">
      <button class="btn btn-primary btn-md dropdown-toggle" type="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown medium button
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#">item1</a>
        <a class="dropdown-item" href="#">item 2</a>
        <a class="dropdown-item" href="#">item 3</a>
      </div>
    </div>
	<div class="btn-group">
      <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown small button
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#">item1</a>
        <a class="dropdown-item" href="#">item 2</a>
        <a class="dropdown-item" href="#">item 3</a>
      </div>
    </div>
   </div>
  </body>
</html>

Output:

Here is the output displaying different sizes of dropdown buttons.

Dropdown button size

Bootstrap Dropdown Directions

The dropdown button can be triggered in any direction like left, right, up, and down. Let's see an example.

Example: Specifying dropdown menu direction using Bootstrap

Add .dropright to the parent element to trigger the menu to the right side of the dropdown menu.

Here is the program to trigger the menu to the right side of the element.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	
     <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <title>Bootstrap 4 </title>
	
  </head>
  <body>
   <div class="container">
    <h2> Dropdown Button </h2>
    <div class="btn-group dropright">
      <button class="btn btn-primary  dropdown-toggle" type="button" id="dropdownMenuLink" data-toggle="dropdown" aria-has="true" aria-expanded="false">
        Dropdown button
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#">item1</a>
        <a class="dropdown-item" href="#">item 2</a>
        <a class="dropdown-item" href="#">item 3</a>
      </div>
    </div>
	<div class="btn-group dropright">
      <button class="btn btn-primary  dropdown-toggle" type="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#">item1</a>
        <a class="dropdown-item" href="#">item 2</a>
        <a class="dropdown-item" href="#">item 3</a>
      </div>
    </div>
   </div>
  </body>
</html>

Output:

Right popup dropdown

Similarly .dropup is used to trigger up, .dropleft to trigger left.

Bootstrap Divider

Example: Adding divider within the dropdown menu using Bootstrap

You can divide dropdown items using a divider. Use .dropdown-divider class to separate a particular item from the rest of the items.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	
     <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <title>Bootstrap 4 </title>
	
  </head>
  <body>
   <div class="container">
    <h2> Dropdown Button </h2>
    <div class="btn-group ">
      <button class="btn btn-primary  dropdown-toggle" type="button" id="dropdownMenuLink" data-toggle="dropdown" aria-has="true" aria-expanded="false">
        Dropdown button
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#">item1</a>
        <a class="dropdown-item" href="#">item 2</a>
        <a class="dropdown-item" href="#">item 3</a>
		<div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Separated item</a>
      </div>
    </div>
   </div>
  </body>
</html>

Output:

Dropdown divider

Conclusion

So here we have seen how we can modify the dropdown by adding different classes. Customize your menu buttons using the contextual button, choose the size of buttons, trigger it in any direction.

Want to learn coding?
Try our new interactive courses.
View All →
Over 20,000+ students enrolled.
About the author:
sandhya6gczb
Learn to Code
Learn and practice coding side-by-side.
NEW
C language Course
115+ coding exercises
Javascript Course
85+ coding exercises
More →