Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Bootstrap Button Dropdowns
3.
Use of Bootstrap Button Dropdowns
4.
How to use Bootstrap Button Dropdown
5.
Types of Bootstrap Button Dropdowns
5.1.
Single Button Dropdowns
5.1.1.
Example
5.1.2.
Code Explanation
5.1.3.
Output
5.2.
Split Button Dropdowns
5.2.1.
Example
5.2.2.
Code Explanation
5.2.3.
Output
5.3.
Button Dropdowns Sizing
5.3.1.
Example
5.3.2.
Code Explanation
5.3.3.
Output
5.4.
Dropdown Directions and Alignments
5.4.1.
Example
5.4.2.
Code Explanation
5.4.3.
Output
5.5.
Dropdown Menu Contents
5.5.1.
Example
5.5.2.
Code Explanation
5.5.3.
Output
6.
Customizing Bootstrap Button Dropdowns
7.
Frequently Asked Questions
7.1.
What is Bootstrap?
7.2.
What are the benefits of using Bootstrap?
7.3.
What are bootstrap button dropdowns?
7.4.
What classes are needed to make the Dropright, Dropleft, Dropup, and Dropdown with Right menus?
7.5.
What is the key difference between Bootstrap and CSS?
8.
Conclusion
Last Updated: Mar 27, 2024
Easy

Bootstrap - Button Dropdowns

Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

Hello Ninja! Let us learn about an interesting component of Bootstrap. This article will discuss the Bootstrap button dropdowns. As the name suggests, a button dropdown is a UI component in the Bootstrap framework that combines a button and a dropdown menu. You can use it to provide a user-friendly and visually appealing way to present a list of options to the user. 

bootstrap button dropdowns

Are you interested in learning more about it? Then follow along.

Bootstrap Button Dropdowns

A Bootstrap button dropdown is a UI component in the Bootstrap framework that combines a button and a dropdown menu. The button can trigger the dropdown menu's display, which contains a list of options from which the user can select. The dropdown menu is usually displayed as a list of links or buttons. The Bootstrap button dropdown is created using HTMLCSS, and JavaScript, and it is designed to be responsive and easily customizable using Bootstrap's pre-made styles and classes.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Use of Bootstrap Button Dropdowns

The Bootstrap button dropdown provides a user-friendly and visually appealing way to present a list of options to the user. It allows the user to select one option from a list of options that are displayed as a dropdown menu. The button dropdown can be used in various situations, such as:

  • A navigation menu, where the button opens a dropdown menu with links to different pages or sections of a website.
     
  • A form element, where the button opens a dropdown menu with a list of options that the user can select to fill in a form field.
     
  • A context menu, where the button opens a dropdown menu with options relevant to a specific context, such as options for a selected item in a list.
     

The Bootstrap button dropdown provides a compact and visually appealing way to present options, and it helps to save screen space compared to displaying all options as a separate button or link. It also provides an intuitive user interface, as users are familiar with the concept of dropdown menus.

How to use Bootstrap Button Dropdown

Here's how you can use a Bootstrap button dropdown:

  • Include the Bootstrap Javascript and CSS files in your HTML file.
     
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
 
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

 

  • Create a button with a dropdown toggle using the dropdown class and add a button inside it using the ".btn" class.
     
  • Add dropdown items by adding <a> elements inside the dropdown menu div.
     

That's it! Your Bootstrap button dropdown should be functional now.

Let's now learn about the types of button dropdowns you can create using bootstrap.

Types of Bootstrap Button Dropdowns

There are two types of Bootstrap button dropdowns:

Single Button Dropdowns

It is a single button, and pressing it causes a dropdown menu of choices to appear. Single button dropdowns in Bootstrap are created using the <button> or <a> element with the class .btn and .dropdown-toggle. The dropdown menu is created using an <div> element with the class .dropdown-menu. You can add the dropdown to all the different types of button variants available.

Here's an example of a single-button dropdown in Bootstrap:

Example

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="d-flex align-items-center justify-content-center h-100">
            <h2> Coding Ninjas </h2>
        </div>
        <div class="d-flex align-items-center justify-content-center h-100">
            <p>Example of a <b>Single dropdown button</b>
            </p>
        </div>
        <div class="dropdown">
            <div class="d-flex align-items-center justify-content-center h-100">
                <button class="btn btn-danger dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Click here! </button>
                <ul class="dropdown-menu">
                    <li>
                        <a class="dropdown-item" href="#"> option one </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#"> option two </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#"> option three </a>
                    </li>
                    <!-- You can also add a divider between the list of items. -->
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li>
                        <a class="dropdown-item" href="#"> option four </a>
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>


Code Explanation

This code is an example of a single dropdown button. The dropdown button can be clicked to display a list of options. Each option is a clickable link represented by an anchor tag. The dropdown is built using the ".dropdown" class, the button is created using a button tag with the ".btn" and ".dropdown-toggle" classes, and the list of options is an unordered list with the ".dropdown-menu" class. The CSS classes "d-flex", "align-items-center" and "justify-content-center" are used to center the content horizontally and vertically within the parent element.

Output

Before clicking on the button: 

single button dropdown before clicking

After clicking on the button:

single button dropdown after clicking

Split Button Dropdowns

It is a button with a dropdown menu and an additional button that can be used to perform an action. Split buttons are a feature in Bootstrap that allows you to create a dropdown button with a main button and a dropdown toggle. This allows the user to take action directly from the main button or access additional options from the dropdown toggle.

Here's an example of a split button dropdown in Bootstrap:

Example

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="d-flex align-items-center justify-content-center h-100">
            <h2> Coding Ninjas </h2>
        </div>
        <div class="d-flex align-items-center justify-content-center h-100">
            <p>Example of a <b>Split dropdown button</b>
            </p>
        </div>
        <div class="d-flex align-items-center justify-content-center h-100">
            <div class="btn-group">
                <button type="button" class="btn btn-dark">I am a split button!</button>
                <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"></button>
                <ul class="dropdown-menu">
                    <li>
                        <a class="dropdown-item" href="#">option one</a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#">option two</a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#">opiton three</a>
                    </li>
                    <!-- You can also add a divider to separate the list items. -->
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li>
                        <a class="dropdown-item" href="#">option four</a>
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>


Code Explanation

This HTML file creates a simple webpage with a split dropdown button using Bootstrap. It contains a button group created with the ".btn-group" class. This group contains the split dropdown button.

The button group contains 3 elements:

  • A button with class "btn btn-dark". This class is used to create a main button of black colour. 
     
  • A button with class ".btn btn-warning dropdown-toggle dropdown-toggle-split". This button serves as the toggle for the dropdown menu. It has the "data-bs-toggle" attribute set to "dropdown" to activate the dropdown.
     
  • An unordered list with the class ".dropdown-menu". It contains the options for the dropdown.


Output

Before clicking on the button: 

output of split button before clicking on the button

After clicking on the split button:

output of split button dropdown after clicking on the button

Button Dropdowns Sizing

In Bootstrap, the button dropdown and split button dropdown components can be resized using the “.btn-lg”, and “.btn-sm” classes.

  • The .btn-lg class increases the button's size, making it larger than the default size. It is useful when you want to make a button stand out and be more noticeable.
     
  • The .btn-sm class decreases the button's size, making it smaller than the default size. It is useful when you want to conserve space on the page or create a less prominent button.
     
  • The .btn class generates a button of the default size.
     

To use these classes in a button dropdown, simply add the appropriate class to the dropdown toggle button.

The following example demonstrates bootstrap button dropdowns of different sizes. 

Example

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div style="padding-left: 150px; color: rgb(249, 111, 60);">
            <h1> Coding Ninjas </h1>
        </div>
        <h4>
            <p>Example of <b>button dropdown sizing:</b>
            </p>
        </h4>
        <ul>
            <li>
                <div class="btn-group">
                    <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Large sized button </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a class="dropdown-item" href="#">option one</a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="#">option two</a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="#">opiton three</a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group">
                    <button class="btn btn-secondary btn-lg" type="button"> Large sized split button </button>
                    <button type="button" class="btn btn-lg btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                        <span class="visually-hidden">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a class="dropdown-item" href="#">option one</a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="#">option two</a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="#">opiton three</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <p>
                <div class="btn-group">
                    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Default button size </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a class="dropdown-item" href="#">option one</a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="#">option two</a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="#">opiton three</a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group">
                    <button class="btn btn-secondary" type="button"> Default split button size </button>
                    <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                        <span class="visually-hidden">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a class="dropdown-item" href="#">option one</a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="#">option two</a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="#">opiton three</a>
                        </li>
                    </ul>
                </div>
                </p>
            </li>
            <li>
                <p>
                <div class="btn-group">
                    <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Small sized button </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a class="dropdown-item" href="#">option one</a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="#">option two</a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="#">opiton three</a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group">
                    <button class="btn btn-secondary btn-sm" type="button"> Small sized split button </button>
                    <button type="button" class="btn btn-sm btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                        <span class="visually-hidden">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a class="dropdown-item" href="#">option one</a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="#">option two</a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="#">opiton three</a>
                        </li>
                    </ul>
                </div>
                </p>
            </li>
        </ul>
    </body>
</html>


Code Explanation

This HTML code demonstrates button dropdowns and split button dropdowns of different sizes. There are three different examples, each showing buttons of different sizes (large, default, and small).

Each dropdown menu is created using a ".btn-group" div element, which serves as a container for the button and the dropdown menu. The buttons are created using a button element with the class ".btn" and one of the size classes ".btn-lg", ".btn-sm", or no size class for default size. To create a split dropdown, two buttons are used, with one designated as the trigger for the dropdown with the ".dropdown-toggle" and ".dropdown-toggle-split" classes. The dropdown menu itself is created using an unordered list element with the class ".dropdown-menu". Each item in the dropdown is created using a list item element with an anchor element inside, which is styled with the ".dropdown-item" class.

Output

button dropdowns of different sizes

Dropdown Directions and Alignments

You can change the directions and alignment of the button dropdown menu. The following example demonstrates various directions and alignments of bootstrap button dropdowns. These can also be applied to split button dropdowns.

Example

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div style="padding-left: 500px; color: rgb(249, 111, 60);">
            <h1> Coding Ninjas </h1>
        </div>
        <ul>
            <li>
                <h2>
                    <p>Example of <b>button dropdown alignments:</b>
                    </p>
                </h2>
            </li>
            <div class="btn-group">
                <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> button 1: with right aligned dropdown menu. </button>
                <ul class="dropdown-menu dropdown-menu-lg-end">
                    <li>
                        <a class="dropdown-item" href="#">Menu item</a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#">Menu item</a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#">Menu item</a>
                    </li>
                </ul>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> Button 2: with left aligned dropdown menu. </button>
                <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
                    <li>
                        <a class="dropdown-item" href="#">Menu item</a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#">Menu item</a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#">Menu item</a>
                    </li>
                </ul>
            </div>
            <p>
                <li>
                    <h2>
                        <p>Example of <b>button dropdown directions:</b>
                        </p>
                    </h2>
                </li>
            </p>
            <p>
            <div class="btn-group">
                <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Button 3: with <b>dropdown</b> menu. </button>
                <ul class="dropdown-menu">
                    <li>
                        <a class="dropdown-item" href="#">Menu item</a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#">Menu item</a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#">Menu item</a>
                    </li>
                </ul>
            </div>
            <div class="btn-group dropend">
                <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Button 4: with <b>dropend</b> menu. </button>
                <ul class="dropdown-menu">
                    <li>
                        <a class="dropdown-item" href="#">Menu item</a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#">Menu item</a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#">Menu item</a>
                    </li>
                </ul>
            </div>
            <div class="btn-group dropstart">
                <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Button 5: with <b>dropstart</b> menu. </button>
                <ul class="dropdown-menu">
                    <li>
                        <a class="dropdown-item" href="#">Menu item</a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#">Menu item</a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#">Menu item</a>
                    </li>
                </ul>
            </div>
            <div class="btn-group dropup">
                <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Button 6: with <b>dropup</b> menu. </button>
                <ul class="dropdown-menu">
                    <li>
                        <a class="dropdown-item" href="#">Menu item</a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#">Menu item</a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#">Menu item</a>
                    </li>
                </ul>
            </div>
            </p>
        </ul>
    </body>
</html>


Code Explanation

This HTML code demonstrates the different directions and alignments of the dropdown menu that you can use with buttons in Bootstrap. This example in this code has the following components.

  • A list of examples of button dropdown alignments:

    • The first example uses the "btn-group" class and the ".dropdown-menu-lg-end" class to create a button with a right-aligned dropdown menu. When clicked, it displays a list of three menu items aligned to the right.
       
    • The second example is similar to the first, but the dropdown menu is left-aligned, created with the ".dropdown-menu-end dropdown-menu-lg-start" class.
       
  • A list of examples of button dropdown directions:

    • Button 3 uses the ".btn-group" and ".dropdown-toggle" classes to create a button with a dropdown menu that opens downwards. 
       
    • Button 4 is similar to the third one, but the dropdown menu opens at the end of the button, created with the ".btn-group dropend" class.
       
    • In button 5, the dropdown menu opens at the start of the button, created with the ".btn-group dropstart" class.
       
    • In button 6, the dropdown menu opens in the upward direction, created with the ".btn-group dropup" class.


Output

Before clicking on any button:

output of button alignment and directions before clicking on any button

On clicking button 1:

on clicking button 1

On clicking button 2:

on clicking button 2

On clicking button 3:

on clicking button 3

 

On clicking button 4:

on clicking button 4

On clicking button 5:

on clicking button 5

On clicking button 6:

on clicking button 6

Dropdown Menu Contents

Several menu contents can be used in a dropdown menu in Bootstrap. These are as follows:

  • Links: You can create a link-based menu item by using an anchor “a” element with the class dropdown-item.
     
  • Headers: You can create a header in the dropdown menu using an “<h6>” element with a class “dropdown-header”.
     
  • Divider: You can create a divider in the dropdown menu using an “<hr>” element with the class “dropdown-divider”.
     
  • Form: You can create a form in the dropdown menu using an <form> element within the class “dropdown-menu”.
     

Here's an example of a dropdown menu with different types of menu contents.

Example

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div style="padding-left: 150px; color: rgb(249, 111, 60);">
            <h1> Coding Ninjas </h1>
        </div>
        <h2>
            <p>Example of <b>dropdown menu contents.</b>
            </p>
        </h2>
        <!-- header -->
        <ul>
            <p>
                <li>
                    <div class="btn-group">
                        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Button 1: with <b>header</b>
                        </button>
                        <ul class="dropdown-menu">
                            <li>
                                <h6 class="dropdown-header">Dropdown header</h6>
                            </li>
                            <li>
                                <a class="dropdown-item" href="#">option one</a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="#">option two</a>
                            </li>
                        </ul>
                    </div>
                </li>
            </p>
            <!-- divider -->
            <li>
                <div class="btn-group">
                    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Button 2: with <b>divider</b>
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a class="dropdown-item" href="#">option one</a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="#">option two</a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="#">option three</a>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li>
                            <a class="dropdown-item" href="#">option four</a>
                        </li>
                    </ul>
                </div>
            </li>
            <p>
                <!-- text -->
                <li>
                    <div class="btn-group">
                        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Button 3: with <b>text</b>
                        </button>
                        <div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
                            <p> Example text inside the dropdown menu. </p>
                        </div>
                    </div>
                </li>
            </p>
            <!-- form -->
            <p>
                <li>
                    <div class="btn-group">
                        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Button 4: with <b>form</b>
                        </button>
                        <div class="dropdown-menu">
                            <form class="px-4 py-3">
                                <div class="mb-3">
                                    <label for="exampleForm" class="form-label">Username: </label>
                                    <input type="email" class="form-control" id="exampleForm">
                                </div>
                                <div class="mb-3">
                                    <label for="passwordField" class="form-label">Password: </label>
                                    <input type="password" class="form-control" id="passwordField">
                                </div>
                                <button type="submit" class="btn btn-primary">Login</button>
                            </form>
                            <div class="dropdown-divider"></div>
                            <div class="dropdown-item">New user? <a href="#"> Sign up</a>
                            </div>
                            <div class="dropdown-item">
                                <a href="#">Forgot password?</a>
                            </div>
                        </div>
                    </div>
                </li>
            </p>
        </ul>
    </body>
</html>


Code Explanation

This HTML code includes four buttons, each with a different type of content in the dropdown menu: header, divider, text, and form.

  • The first button has a header in the dropdown menu with the text "Dropdown header".
     
  • The second button has options separated by a divider.
     
  • The third button has simple text inside the dropdown menu.
     
  • The fourth button has a form for login with inputs for username and password, as well as links for new users to sign up and for forgotten passwords.
     

The dropdown functionality is added through the "data-bs-toggle" attribute. The "btn-group" class is used to group the buttons, and the "dropdown-menu" class creates the dropdown content.

Output

Before clicking on any button:

output of button dropdowns with different menu contents before clicking any button

On clicking button 1:

on clicking button 1

On clicking button 2:

on clicking button 2

On clicking button 3:

on clicking button 3

On clicking button 4:

on clicking button 4

Customizing Bootstrap Button Dropdowns

Bootstrap's button dropdowns can be customized in several ways:
 

  • CSS: You can use CSS to change the appearance of the dropdown button and its items. You can also use CSS to add custom styles to the dropdown, such as colour, font size, padding, etc.
     
  • JavaScript: Bootstrap's JavaScript plugin provides options for customizing the behaviour of the dropdown. For example, you can set the dropdown to close automatically when an item is clicked or to allow multiple items to be selected.
     
  • HTML: You can use HTML to modify the structure and content of the dropdown. For example, you can add custom items to the dropdown, or you can use different HTML elements to create the dropdown button and its items.
     

Let us now address some of the frequently asked questions.

Also Read About, javascript replace

Frequently Asked Questions

What is Bootstrap?

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

What are the benefits of using Bootstrap?

Bootstrap provides many pre-styled components like buttons, forms, etc. It is used to create responsive designs without any effort. The pages made using Bootstrap components are faster and have more functionality.

What are bootstrap button dropdowns?

A button dropdown is a UI component in the Bootstrap framework that combines a button and a dropdown menu.

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.

What is the key difference between Bootstrap and CSS?

The key difference between Bootstrap and CSS is that Bootstrap is a front-end framework, while CSS is a style sheet language.

Conclusion

In this article, we learned about the bootstrap button dropdowns. We discussed the sizing of buttons and directions of dropdowns. We also talked about different types of menu contents that we can use with bootstrap button dropdowns. Finally, we learned how to use them in our projects with the help of examples.

To learn more about Bootstrap, you can refer to the following articles.

You may refer to our Guided Path on Code Studios for enhancing your skill set on DSACompetitive ProgrammingSystem Design, etc. Check out essential interview questions, practice our available mock tests, look at the interview bundle for interview preparations, and so much more!

Happy Learning, Ninjas!

Previous article
Tailwind CSS Vs Bootstrap
Next article
Bootstrap Input Groups
Live masterclass