In this tutorial, we will discuss the Bootstrap dropdown, dropdowns with contextual classes, dropdown header, divider, sizes, active & disabled items, dropright, dropleft, dropup, dropdown right menu, dropdown text, split button dropdown, button group with dropdown etc.:
Please note that we have used Bootstrap version 4 in all examples.
=> Check Here To See A-Z Of Bootstrap Training Tutorials
Table of Contents:
Bootstrap Dropdown
A button can be converted into a dropdown. It is a toggleable menu that allows a user to select one option from a predefined list. You can either use the <button> element or the <a> element to trigger a dropdown.
The below table summarizes some of the main classes that we have used in this tutorial.
| Class | Usage |
|---|---|
| .dropdown class | This class is one of the classes that is used to create a basic dropdown. |
| .dropdown-toggle class | This class is one of the classes that is used to create a basic dropdown. |
| .dropdown-menu class | This class is one of the classes that is used to create a basic dropdown. |
| .dropdown-item class | This class is one of the classes that is used to create a basic dropdown. |
| .btn-primary class | This class is used to add a blue color to a dropdown. |
| .btn-secondary class | This class is used to add a grey color to a dropdown. |
| .btn-success class | This class is used to add a green color to a dropdown. |
| .btn-danger class | This class is used to add a red color to a dropdown. |
| .btn-warning class | This class is used to add an orange color to a dropdown. |
| .btn-info class | This class is used to add a light blue color to a dropdown. |
| .btn-light class | This class is used to add a light grey color to a dropdown. |
| .btn-dark class | This class is used to add a dark grey color to a dropdown |
| .dropdown-header class | This class is used to add a header inside the Bootstrap dropdown menu. |
| .dropdown-divider class | This class is used to separate menu items by adding a horizontal line. |
| .btn-sm class | This class is used to create a small dropdown. |
| .btn-lg class | This class is used to create a large dropdown. |
| .active class | This class is used to create a dropdown that is in the active state. |
| .disabled class | This class is used to create a dropdown that is disabled. |
| .dropright class | This class is used to create a dropright. |
| .dropleft class | This class is used to create a dropleft. |
| .dropup class | This class is used to create a dropup. |
| .dropdown-menu-right class | This class is used to create a dropdown with the right menu. |
| .dropdown-item-text class | This class is used to create a dropdown item text. |
| .dropdown-toggle-split class | This class is used to create a split button dropdown. |
| .btn-group class | This class is used to create a button group with dropdown. |
| .btn-group-vertical class | This class is used to create a button group with vertical dropdown. |
Example of a Basic Dropdown
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </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> <a class="dropdown-item" href="#">Action 3</a> </div> </div> <div class="dropdown show"> <a class="btn btn-primary dropdown-toggle" href="#" data-toggle="dropdown">Dropdown Link</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action 1</a> <a class="dropdown-item" href="#">Action 2</a> <a class="dropdown-item" href="#">Action 3</a> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
Browser output of the above Programming Code
Dropdowns With Contextual Classes
The following list shows the eight contextual classes that you can use to create colored dropdowns.
- The .btn-primary class – This class is used to add a blue color to a dropdown.
- The .btn-secondary class – This class is used to add a grey color to a dropdown.
- The .btn-success class – This class is used to add a green color to a dropdown.
- The .btn-danger class – This class is used to add red color to a dropdown.
- The .btn-warning class – This class is used to add orange color to a dropdown.
- The .btn-info class – This class is used to add a light blue color to a dropdown.
- The .btn-light class – This class is used to add a light grey color to a dropdown.
- The .btn-dark class – This class is used to add a dark grey color to a dropdown.
Example of Dropdowns with Contextual Classes
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </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> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
Browser output of the above Programming Code
Dropdown Header And Dropdown Divider
Add the .dropdown-header class to add a header inside the Bootstrap dropdown menu and add the .dropdown-divider class to separate Bootstrap menu items by adding a horizontal line.
Example of Dropdown Header & Dropdown Divider:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </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"> <h5 class="dropdown-header">Dropdown Header</h5> <a class="dropdown-item" href="#">Action 1</a> <a class="dropdown-item" href="#">Action 2</a> <a class="dropdown-item" href="#">Action 3</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Action 4</a> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
Browser output of the above Programming Code
Dropdown Sizes And States
Dropdown Sizes
There are three sizes of dropdowns.
- Small Dropdowns: Add the .btn-sm class to the <button> element to create a small dropdown.
- Default size Dropdowns: No need to add a specific class to create a default size dropdown as it is the default size.
- Large Dropdowns: Add the .btn-lg class to the <button> element to create a large dropdown.
Dropdown States
There are two types of Dropdown States.
- Active State: Add the .active class to create a dropdown item that is in the active state.
- Disabled State: Add the .disabled class to disable a dropdown item.
Example of Active & Disabled items and Dropdown Sizes
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <div class="dropdown mb-3"> <button class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown"> Small 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"> Regular 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 btn-lg dropdown-toggle" data-toggle="dropdown"> Large 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="#">Regular Action</a> <a class="dropdown-item active" href="#">Active Action</a> <a class="dropdown-item disabled" href="#">Disabled Action</a> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
Browser output of the above Programming Code
Dropright, Dropleft, Dropup And Dropdown Right Menu
Add the .dropright class and the .dropleft class to create a dropright and a dropleft respectively. Instead of adding the .dropdown class, you can add the .dropup class to create a dropup.
By default, the dropdown menu is left-aligned. To make the dropdown menu right-aligned, add the .dropdown-menu-right class.
Example of Dropright, Dropleft, Dropup & Dropdown Right Menu:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <div class="dropdown dropright"> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Dropright </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 dropleft float-right"> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Dropleft </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="dropup mt-5 mb-5"> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Dropup </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-primary dropdown-toggle" data-toggle="dropdown"> Dropdown Menu Right </button> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="#">Action 1</a> <a class="dropdown-item" href="#">Action 2</a> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
Browser output of the above Programming Code
Bootstrap Dropdown Text
Add the .dropdown-item-text class to add plain text to a dropdown item. You can also use it in links for default styling of links.
Example of Dropdown Text
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Dropdown Button </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Regular Action</a> <a class="dropdown-item-text" href="#">Text Link</a> <span class="dropdown-item-text">Plain Text</span> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
Browser output of the above Programming Code
Split Button Dropdown
Split button dropdowns are similar to regular dropdowns (single button dropdowns), but they have proper spacing around the dropdown caret.
Example of Split Button Dropdown
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <div class="btn-group"> <button type="button" class="btn btn-warning">Split Button Dropdown</button> <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action 1</a> <a class="dropdown-item" href="#">Action 2</a> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
Browser Output of the above Programming Code
Button Group With Dropdown
Instead of using a single button, you can use a button group to create a button group with a dropdown. It can be either in the horizontal direction or vertical direction.
Example of (horizontal) Button Group & Vertical Button Group Dropdown:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <div class="btn-group mx-3"> <button class="btn btn-danger">Asia</button> <button class="btn btn-warning">Africa</button> <div class="btn-group"> <button class="btn btn-success dropdown-toggle" data-toggle="dropdown"> Europe </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a> </div> </div> </div> <div class="btn-group-vertical"> <button class="btn btn-danger">Asia</button> <button class="btn btn-warning">Africa</button> <div class="btn-group"> <button class="btn btn-success dropdown-toggle" data-toggle="dropdown"> Europe </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
Browser output of the above Programming Code
Frequently Asked Questions
In this section, we will look at some of the frequently asked questions about Bootstrap 4 dropdowns.
Q #1) Which main classes are used to create a basic Dropdown?
Answer: The main classes that are used to create a basic dropdown are the .dropdown class, .dropdown-toggle class, .dropdown-menu class and .dropdown-item class.
Q #2) What contextual classes are used to create Colored Dropdowns?
Answer: Eight contextual classes can be used to create colored dropdowns. They are 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.
Q #3) What is the purpose of a Dropdown Header?
Answer: The purpose of a dropdown header is to add a header inside the Bootstrap dropdown menu.
Q #4) What is the purpose of a Dropdown Divider?
Answer: The purpose of a dropdown divider is to separate Bootstrap menu items by adding a horizontal line.
Q #5) What are the different sizes of Dropdowns?
Answer: There are three sizes of dropdowns i.e. Small dropdown size, Default dropdown size, and Large dropdown size.
Q #6) Which class is used to create a Small Dropdown?
Answer: The .btn-sm class is used to create a Small dropdown.
Q #7) Which class is used to create a Large Dropdown?
Answer: The .btn-lg class is used to create a Large dropdown.
Q #8) What are the two types of Dropdown States?
Answer: The two types of dropdown states are the Active state and the Disabled state.
Q #9) Which class is used for an Active Dropdown item?
Answer: The .active class is used for an Active dropdown item.
Q #10) How to create an Inactive or Disabled dropdown item?
Answer: Add the .disabled class to create an Inactive or Disabled dropdown item.
Q #11) Which classes are used to create Dropright, Dropleft, Dropup, and a Dropdown with Right menu?
Answer: The classes that are used to create a Dropright, Dropleft, Dropup and a dropdown with the right menu are the .dropright class, .dropleft class, .dropup class and the .dropdown-menu-right class respectively.
Q #12) How can you create a Dropdown Text?
Answer: Add the .dropdown-item-text class to create a dropdown text.
Q #13) Which class is used to create a Split Button Dropdown?
Answer: The .dropdown-toggle-split class is used to create a split button dropdown.
Q #14) Can we create a button group with Dropdown?
Answer: Yes, we can create a button group with Dropdown.
Conclusion
A dropdown is a toggleable menu that allows a user to select one option from a predefined list. Eight contextual classes can be used to create colored dropdowns. You can also control other styling features such as dropdown size, state, etc.
In our upcoming tutorial, we will discuss Bootstrap 4 inputs and input groups in detail.
=> Read Through The Easy Bootstrap Training Series