Bootstrap - Button Dropdowns

Aditya kumar
Last Updated: May 13, 2022

Introduction

Dropdowns are contextual overlays that can be toggled to display lists of links and other information. The supplied Bootstrap dropdown JavaScript plugin makes them interactive. It's an intentional design decision that they're toggled by clicking rather than hovering.

Popper.js, a third-party package that supports dynamic positioning and viewport detection, creates dropdowns. Use bootstrap.bundle.min.js / bootstrap.bundle.js, which contains Popper.js, or include popper.min.js before Bootstrap's JavaScript. However, because dynamic positioning isn't required, Popper.js isn't utilised to place dropdowns in navbars.

If you're compiling our JavaScript from the ground up, you'll need util.js.

Simply surround the button and the dropdown menu in a.btn-group to add a dropdown to it. span class = "caret">/span> can also be used to indicate that the button is a dropdown.

 

The following example shows a simple single-button dropdown menu:

<!DOCTYPE html>
<html>
<head>
  <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>
<div class = "btn-group">
   
   <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
      Default 
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
</div>

<div class = "btn-group">
   <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
      Primary 
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
   
</div>
</body>
</html>

 

Output

 

Split Button Dropdown

Split button dropdowns have the same general appearance as dropdown buttons, but they also have a primary action. The major action is on the left, while the dropdown is displayed via a toggle on the right.

<!DOCTYPE html>
<html>

<head>
    <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>
    <div class="btn-group">
        <button type="button" class="btn btn-default">Default</button>

        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
            <span class="sr-only">Toggle Dropdown</span>
        </button>

        <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>

            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </div>

    <div class="btn-group">
        <button type="button" class="btn btn-primary">Primary</button>

        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
            <span class="sr-only">Toggle Dropdown</span>
        </button>

        <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>

            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </div>
</body>

</html>

 

Output

Button Dropdown Size

The dropdowns can be used with any button size, including .btn-large,.btn-sm, and.btn-xs.

<!DOCTYPE html>
<html>

<head>
    <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>
    <div class="btn-group">

        <button type="button" class="btn btn-default dropdown-toggle btn-lg" data-toggle="dropdown">
            Default
            <span class="caret"></span>
        </button>

        <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>

            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </div>

    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle btn-sm" data-toggle="dropdown">
            Primary
            <span class="caret"></span>
        </button>

        <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>

            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </div>

    <div class="btn-group">
        <button type="button" class="btn btn-success dropdown-toggle btn-xs" data-toggle="dropdown">
            Success
            <span class="caret"></span>
        </button>

        <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>

            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>

    </div>
</body>

</html>

 

Output

Contextual Classes in Dropdowns

The eight contextual classes that you can use to create coloured dropdowns are listed below:

  • The .btn-primary class- This class gives a dropdown of a blue tint.
  • The .btn-secondary class- This class gives a dropdown of a grey tint.
  • The .btn-success class-  This class gives a dropdown of a green tint.
  • The .btn-danger class-  This class gives a dropdown of a red tint.
  • The .btn-warning class-  This class gives a dropdown of an orange tint.
  • The .btn-info class-  This class gives a dropdown of a light blue tint.
  • The .btn-light class-  This class gives a dropdown of a light grey tint.
  • The .btn-dark class-  This class gives a dropdown of a dark grey tint.

 

<!DOCTYPE html>
<html>

<head>
    <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>
    <div class="container mt-3">

        <div class="dropdown mb-3">
            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                Dropdown Button
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Action 1</a>
                <a class="dropdown-item" href="#">Action 2</a>
            </div>
        </div>

        <div class="dropdown mb-3">
            <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
                Dropdown Button
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Action 1</a>
                <a class="dropdown-item" href="#">Action 2</a>
            </div>
        </div>

        <div class="dropdown mb-3">
            <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">
                Dropdown Button
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Action 1</a>
                <a class="dropdown-item" href="#">Action 2</a>
            </div>
        </div>

        <div class="dropdown mb-3">
            <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                Dropdown Button
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Action 1</a>
                <a class="dropdown-item" href="#">Action 2</a>
            </div>
        </div>

        <div class="dropdown mb-3">
            <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
                Dropdown Button
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Action 1</a>
                <a class="dropdown-item" href="#">Action 2</a>
            </div>
        </div>

        <div class="dropdown mb-3">
            <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                Dropdown Button
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Action 1</a>
                <a class="dropdown-item" href="#">Action 2</a>
            </div>
        </div>

        <div class="dropdown mb-3">
            <button class="btn btn-dark dropdown-toggle" data-toggle="dropdown">
                Dropdown Button
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Action 1</a>
                <a class="dropdown-item" href="#">Action 2</a>
            </div>
        </div>

        <div class="dropdown">
            <button class="btn btn-light dropdown-toggle" data-toggle="dropdown">
                Dropdown Button
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Action 1</a>
                <a class="dropdown-item" href="#">Action 2</a>
            </div>
        </div>
</body>

</html>

 

Output 

 

Dropup Variation

Menus can also be designed to drop up instead of down. Simply add .dropup to the parent .btn-group container.

<!DOCTYPE html>
<html>

<head>
    <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>
    <div class="row" style="margin-left:50px; margin-top:200px">

        <div class="btn-group dropup">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                Default
                <span class="caret"></span>
            </button>

            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>

                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>

        <div class="btn-group dropup">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                Primary
                <span class="caret"></span>
            </button>

            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>

                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>

    </div>

</body>

</html>

 

Output

Menu Items

Previously, the contents of dropdown menus had to be linked, however, this is no longer the case with v4. Instead of only <a>s, you may now use <button> components in your dropdowns.

<!DOCTYPE html>
<html>

<head>
    <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>
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            Dropdown
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
            <button class="dropdown-item" type="button">Action</button>
            <button class="dropdown-item" type="button">Another action</button>
            <button class="dropdown-item" type="button">Something else here</button>
        </div>
    </div>
</body>

</html>

 

Output

Frequently Asked Questions

  1. For a simple button group, which of the bootstrap styles is used?
    .btn-group class is used to create a primary button group. Wrap a set of buttons in .btn-group with the class .btn.
     
  2. To add a dropdown to tabs, which of the bootstrap styles is used?
    To add dropdowns to a tab, follow these steps: Begin with an essential unordered list with the .nav base class; then add the .nav-pills class. Add a .dropdown-menu class to an unordered list.
     
  3. To construct Colored Dropdowns, what contextual classes are used?
    Colored dropdowns can be created using eight contextual classes. The .btn-primary class, .btn-secondary class, .btn-success class,.btn-danger class, .btn-warning class, .btn-info class, .btn-light class, and .btn-dark class are the classe.
     
  4. What classes are needed to make the Dropright, Dropleft, Dropup, and Dropdown with Right menus?
    The .dropright class, .dropleft class, .dropup class, and .dropdown-menu-right classes are used to construct a Dropright, Dropleft, Dropup, and a dropdown with the right menu, respectively.

 

Key Takeaways

In this article, we have discussed how to use Bootstrap classes to add a dropdown menu to buttons. Bootstrap 5 was used to create this responsive dropdown. Dropdowns are responsible for displaying a list of links in a toggleable (collapsible) format. With the MDB dropdown plugin, you may toggle contextual overlays for showing lists of links and more.

If you want to get started with bootstrap for free and want to learn more about it then you can visit Learn Bootstrap and checkout our blog to know why bootstrap is cool and how it helps you in designing your website with Responsive Network Vanilla utilising HTML, CSS & Bootstrap.

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think