Logo

Bootstrap 4 Dropdowns

Bootstrap Dropdowns

Bootstrap 4 provides a dropdown component, which is a toggle and contextual layout, used to display a predefined list of links. It allows the user to select a value from the dropdown list items. You have to click on the dropdown to toggle; it does not toggle by hover the cursor on the dropdown.

The dropdown is developed on Popper.js, which is a third party library that provides dynamic state and viewport detection. It is necessary to add popper.min.js CDN link before bootstrap javascript CDN link, or you can use bootstrap.bundle.min.js / bootstrap.bundle.js which has Popper.js library.

The bootstrap dropdowns are designed in such a way that can be applied in multiple situations and markup structure. In complex navigational systems, the dropdown provides the facility to place almost all the important links in the navigation bar. We can also make dropdowns that have additional inputs (search fields) and form controls (login forms.)

Basic Dropdown

You can convert any button into a dropdown menu by making some markup changes in it.

Steps for creating a dropdown button

  • Add .dropdown class to  <div> element to make the dropdown menu.
  • Add .btn class along with the contextual class , .dropdown-toggle class, and data-toggle=”dropdown” attribute to <button> element (immediate child of div) to open the dropdown menu.
  • Add .dropdown-menu class to the  <div> element for creating a list or menu.
  • Add the .dropdown-item class to <a> element  for list items.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Dropdown 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.4.1/css/bootstrap.min.css">
 </head> 
 <div class="container">
   <h2>Dropdowns</h2>
   <div class="dropdown">
     <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Dropdown 
     </button>
     <div class="dropdown-menu">
       <a class="dropdown-item" href="#">Item 1</a> 
       <a class="dropdown-item" href="#">Item 2</a>
       <a class="dropdown-item" href="#">Item 3</a>
     </div>
   </div>
 </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output

Bootstrap 4 Dropdowns

Split Button Dropdown

Split button dropdown comprises of proper spacing and a thin horizontal line for separatinf the links. The .dropdown-toggle-split class is used to make the split button dropdown.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Dropdown 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.4.1/css/bootstrap.min.css">
 </head><br> 
 <div class="container">
 <div class="btn-group">
   <button type="button" class="btn btn-primary">Action</button>
   <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     <span class="sr-only">Toggle Dropdown</span>
   </button>
   <div class="dropdown-menu"> 
     <a class="dropdown-item" href="#">Link 1</a>
     <a class="dropdown-item" href="#">Link 2</a>
     <a class="dropdown-item" href="#">Link 3</a>
     <div class="dropdown-divider"></div>
     <a class="dropdown-item" href="#">Another Link</a>
   </div>
 </div>
 </div> 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output

Bootstrap 4 Dropdowns

Disabled and Active items

We can also customize the links or list items of the dropdown by using the two predefined classes which are .active class and .disabled class.

The .active class is used to highlight the list items. This class adds the blue background color (primary contextual color) the list items that we want to make active or highlight.

The .disabled class makes the list item disabled and it changes the text color of the list item to light gray.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Dropdown 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.4.1/css/bootstrap.min.css">
 </head> 
 <div class="container">
   <h2>Dropdowns</h2>
   <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="#">Normal</a>
       <a class="dropdown-item active" href="#">Active</a>
       <a class="dropdown-item disabled" href="#">Disabled</a>
     </div>
   </div> 
 </div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output

Bootstrap 4 Dropdowns

Dropdown Header – Bootstrap 4 offers a class that helps in classifying the list items by adding header or label in the dropdown menu. You can create the dropdown header by adding .dropdown-header class to the <div> element.

Example 

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Dropdown 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.4.1/css/bootstrap.min.css">
 </head>
 <div class="container">
   <h2>Dropdowns</h2>
   <div class="dropdown">
     <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 
       Dropdown button
     </button>
     <div class="dropdown-menu">
       <h5 class="dropdown-header">Header 1</h5>
       <a class="dropdown-item" href="#">Link 1</a>
       <a class="dropdown-item" href="#">Link 2</a>
       <a class="dropdown-item" href="#">Link 3</a> 
       <h5 class="dropdown-header">Header 2</h5>
       <a class="dropdown-item" href="#">Another link</a>
     </div>
   </div>
 </div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script> 
 </body>
 </html>

Output

Bootstrap 4 Dropdowns

Dropdown Position – We can also set the position of the arrow/caret to the left or right as per our need. The position of the arrow/caret will automatically change according to the class but the dropdown menu will always remains on the right. If we create the dropleft menu then the arrow/caret will on the left of the dropdown button (before the text) and if we create the dropright menu then the arrow/caret will be on the right of the dropdown (after the text).

  • Add the .dropright along with the .dropdown class to the <div> element then the dropdown arrow/caret  will appear on the right.
  • Add the .dropleft class along with the .dropdown class to the <div> element then the dropdown arrow/caret will appear on the left.

Example

This example shows the dropright arrow/caret position:

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Dropdown 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.4.1/css/bootstrap.min.css">
 </head>
 <div class="container"> 
   <h2>Dropdowns</h2>
   <div class="dropdown dropright">
     <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Dropright button
     </button>
     <div class="dropdown-menu">
       <a class="dropdown-item" href="#">Link 1</a> 
       <a class="dropdown-item" href="#">Link 2</a>
       <a class="dropdown-item" href="#">Link 3</a>
     </div>
   </div>
 </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output           

Bootstrap 4 Dropdowns

This example shows dropleft arrow/caret position:

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Dropdown 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.4.1/css/bootstrap.min.css">
 </head> 
 <div class="container">
   <h2>Dropdowns</h2>
   <div class="dropdown dropleft">
     <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Dropleft button
     </button>
     <div class="dropdown-menu"> 
       <a class="dropdown-item" href="#">Link 1</a>
       <a class="dropdown-item" href="#">Link 2</a>
       <a class="dropdown-item" href="#">Link 3</a>
     </div>
   </div>
 </div> 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output

Bootstrap 4 Dropdowns

Dropdown Menu Right/Left Aligned - The dropdown menu left/right aligned is similar to the dropdown position but the difference is that the arrow/caret will always be on the right side of the dropdown button.  We only change the alignment of the dropdown menu to the left or right.

  • Add the .dropdown-menu-right class to align the dropdown menu on the right.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Dropdown 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.4.1/css/bootstrap.min.css">
 </head> 
 <div class="container">
   <h2>Dropdowns</h2>
   <div class="dropdown">
     <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Dropdown button (for right alignment of dropdown menu)
     </button>
     <div class="dropdown-menu dropdown-menu-right">
       <a class="dropdown-item" href="#">Link 1</a> 
       <a class="dropdown-item" href="#">Link 2</a>
       <a class="dropdown-item" href="#">Link 3</a>
     </div>
   </div>
 </div> 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output

Bootstrap 4 Dropdowns
  • Add  the .dropdown-menu-left class to align the dropdown menu on the left.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Dropdown 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.4.1/css/bootstrap.min.css"> 
 </head>
 <div class="container">
   <h2>Dropdowns</h2>
   <div class="dropdown">
     <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Dropdown button (for left alignment of dropdown menu)
     </button>
     <div class="dropdown-menu dropdown-menu-left"> 
       <a class="dropdown-item" href="#">Link 1</a>
       <a class="dropdown-item" href="#">Link 2</a>
       <a class="dropdown-item" href="#">Link 3</a>
     </div>
   </div>
 </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output

Bootstrap 4 Dropdowns

Dropup – The dropup is used when we want the dropdown menu to get open in the upward direction instead of downwards. To create a dropup we have to use the .dropup class instead of .dropdown class to the <div> element.

Example 

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Dropdown 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.4.1/css/bootstrap.min.css"> 
 </head>
 <div class="container">
   <h2>Dropdowns</h2><br><br><br><br>
   <div class="dropup">
     <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Dropup button
     </button>
     <div class="dropdown-menu">
       <a class="dropdown-item" href="#">Link 1</a>
       <a class="dropdown-item" href="#">Link 2</a>
     </div>
   </div> 
 </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output

Bootstrap 4 Dropdowns

Dropdown Text – In the dropdown text, we can add simple text to the dropdown menu. We can also provide the link to the text for basic styling. The class that is used to add plain text to the dropdown menu is .dropdown-item-text.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Dropdown 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.4.1/css/bootstrap.min.css">
 </head>
 <div class="container">
   <h2>Dropdowns</h2>
   <div class="dropdown">
     <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Dropdown button
     </button> 
   <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.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output

Bootstrap 4 Dropdowns

Grouped Button with Dropdown – We can create horizontal/vertical grouped buttons by adding a series of buttons along with the dropdown button. The .btn-group class is used to create the group buttons, and the .dropdown-menu class is used to create the dropdown menu.

Example – For horizontal grouped button with dropdown.

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Dropdown 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.4.1/css/bootstrap.min.css"> 
 </head>
 <div class="container">
   <h2>Button Groups</h2>
   <div class="btn-group">
     <button type="button" class="btn btn-primary">button 1</button>
     <button type="button" class="btn btn-primary">Button 2</button>
     <div class="btn-group"> 
       <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Dropdown button
       </button>
       <div class="dropdown-menu">
         <a class="dropdown-item" href="#">Tablet</a>
         <a class="dropdown-item" href="#">Smartphone</a>
       </div>
     </div> 
   </div>
 </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output

Bootstrap 4 Dropdowns

Example – For vertical grouped button with dropdown.

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Dropdown 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.4.1/css/bootstrap.min.css"> 
 </head>
 <div class="container">
   <h2>Vertical Button Group with Dropdown</h2>
   <div class="btn-group-vertical">
     <button type="button" class="btn btn-primary">Button 1</button>
     <button type="button" class="btn btn-primary">Button 2</button> 
     <div class="btn-group">
       <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
         Dropdown Button
       </button>
       <div class="dropdown-menu">
         <a class="dropdown-item" href="#">Tablet</a>
         <a class="dropdown-item" href="#">Smartphone</a> 
       </div>
     </div>
   </div>
 </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script> 
 </body>
 </html>

Output

Bootstrap 4 Dropdowns

Related Topics

Bootstrap Datepicker

What is a Bootstrap Datepicker? It is used to display a calendar with the date, month, and time from a dropdown menu. We will use an example to see how the date...

5 minutes read.

Text Shadows in CSS

Text shadows are created with the text-shadow CSS property. It takes a list of shadows separated by commas to be applied to the text and any of its styles. Each...

5 minutes read.

CakePHP Layouts & Elements

A layout includes a presentation code that can be wrapped out in your view. It means that what you want to see in your view should be well-positioned in layout. When you create...

9 minutes read.

Bootstrap Tabs and Pills

Bootstrap Menus Bootstrap menu is used to create different types of menu. It can created horizontal with its .list-inlineclass. <div class="container">       <h3>Example of Bootstrap Menu</h3>       <ul class="list-inline">         <li><a href="#">Home</a></li>         <li><a href="#">About</a></li>         <li><a href="#">Contact</a></li>         <li><a href="#">services</a></li>       </ul>     </div> Try Now Bootstrap Tabs Bootstrap tabl is look like is menu but there is some difference....

4 minutes read.

Bootstrap 4 Card

In Bootstrap 4, a card is a bordered box with padding around its content. It has options for headers, footers, colors, content, etc. The card provides the link, title, image,...

8 minutes read.

Bootstrap 4 Content

Typography Typography is used for styling and formatting the content. It also helps in creating customized headings, sub-headings, lists, paragraphs, etc. Headings Bootstrap 4 offers HTML heading <h1> to <h6> that has bolder...

8 minutes read.

Bootstrap Buttons Groups

Bootstrap 4 Button Group Bootstrap 4 provides a feature button group that helps in creating a series of buttons together in a group. Basic Button Group  The .btn-group class is used within the <div> tag to create a...

6 minutes read.

Bootstrap With CSS

← Prev Next → ...

1 minute read.

Bootstrap 4 navbar

A navigation navbar or navbar uses in every website to make it more user-friendly. Navigating through the website is easier, and the user can instantly search for the topic of...

8 minutes read.

Bootstrap Wells

In Bootstrap, well are used to add a rounded border around an element. It is default some padding and gray background color. It is like a container that displays the content....

1 minute read.

Bootstrap 4 Alerts

Bootstrap 4 Alerts Bootstrap 4 offers alerts that are used to provide feedback messages on the user’s actions. There is no boundation of text length in the alerts. Alerts can be created...

1 minute read.

Bootstrap 4 Popover

Bootstrap 4 Popover Popover A popover is similar to the tooltip. The only difference between tooltip and Popover is that in the tooltip, the popup box appears when you move the cursor...

6 minutes read.

Bootstrap Grid System Example

Bootstrap Grid System Example Stacked to horizontal – In stacked to the horizontal grid system, the grid columns are stacked on top of each other on extra small devices and becomes...

7 minutes read.

Bootstrap Navigation bar

Navigation Bars In Bootstrap, We can create navigation bar like a navigation header. It is placed at the top of the page. We can collapse or extend it according to screen...

3 minutes read.

Bootstrap 4 Dropdowns

Bootstrap Dropdowns Bootstrap 4 provides a dropdown component, which is a toggle and contextual layout, used to display a predefined list of links. It allows the user to select a value from the dropdown...

15 minutes read.

Bootstrap 4 Grid System

Bootstrap 4 Grid Systems Bootstrap offers a responsive and mobile-first grid system with the help of which we can divide the screen of the web browser into 12 horizontal parts. It has predefined classes...

4 minutes read.

Bootstrap 4 Tutorial

What is Bootstrap? Bootstrap is a CSS (Cascading Style Sheets) framework, which is used to develop a responsive website. It is an open-source and mobile-first front-end framework. It has design templates that are based...

4 minutes read.

Bootstrap Tables

We can create different types of responsive and awesome bootstrap table like: striped , border etc. Bootstrap Basic Table We can create a basic bootstrap table by using its class .table. It has...

3 minutes read.

Bootstrap 4 Inputs

Bootstrap Inputs Bootstrap Form Inputs – Several pre-defined input types are available in HTML and Bootstrap. These input types help in styling the forms. When an input type is specified in the form, it means...

10 minutes read.

Bootstrap First Example

1) Add HTML5 doctype Before starting the example of Bootstrap, we should know about the some basic rules of Bootstrap. We have to add HTML5 doctype with lang element and CSS properties. <!DOCTYPE html>   <html lang="en">     <head>       <meta charset="utf-8">      </head>   </html> 2) Bootstrap...

2 minutes read.