Bootstrap 4 - Dropdowns

Description

Dropdown menus are toggleable, contextual menus for displaying links in a list format.

To use dropdown, just wrap the dropdown menu within the .dropdown class. The following example demonstrates a basic dropdown menu −

Example

Live Demo 
<html lang = "en">
   <head>
      <!-- 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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
      <h2>Basic Dropdown</h2>
         <div class = "row">
            <div class = "dropdown">
               <button class = "btn btn-info 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 = "#">Home</a>
                  <a class = "dropdown-item" href = "#">About Us</a>
                  <a class = "dropdown-item" href = "#">Contact Us</a>
               </div>
            </div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

It will produce the following result −

Output

Dropdown with Split Buttons

You can create split button dropdown by using the .dropdown-toggle-splitclass, which provides space around the dropdown caret and button.

The following example demonstrates this −

Example

Live Demo 
<html lang = "en">
   <head>
      <!-- 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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Dropdown with Split Buttons</h2>
         <div class = "row">
            <div class = "btn-group">
               <button type = "button" class = "btn btn-primary">Primary</button>
               <button type = "button" class = "btn btn-primary 
                  dropdown-toggle dropdown-toggle-split" data-toggle = "dropdown">
               </button>
               
               <div class = "dropdown-menu">
                  <a class = "dropdown-item" href = "#">Home</a>
                  <a class = "dropdown-item" href = "#">About Us</a>
                  <a class = "dropdown-item" href = "#">Contact Us</a>
               </div>
            </div>
             
            
            <div class = "btn-group">
               <button type = "button" class = "btn btn-secondary">Secondary</button>
               <button type = "button" class = "btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle = "dropdown">
               </button>
               
               <div class = "dropdown-menu">
                  <a class = "dropdown-item" href = "#">Home</a>
                  <a class = "dropdown-item" href = "#">About Us</a>
                  <a class = "dropdown-item" href = "#">Contact Us</a>
               </div>
            </div>
             
            
            <div class = "btn-group">
               <button type =" button" class = "btn btn-success">Success</button>
               <button type = "button" class = "btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle = "dropdown">
               </button>
               <div class = "dropdown-menu">
                  <a class = "dropdown-item" href = "#">Home</a>
                  <a class = "dropdown-item" href = "#">About Us</a>
                  <a class = "dropdown-item" href = "#">Contact Us</a>
               </div>
            </div>
             
            
            <div class = "btn-group">
               <button type = "button" class = "btn btn-info">Info</button>
               <button type = "button" class = "btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle = "dropdown">
               </button>
               <div class = "dropdown-menu">
                  <a class = "dropdown-item" href = "#">Home</a>
                  <a class = "dropdown-item" href = "#">About Us</a>
                  <a class = "dropdown-item" href = "#">Contact Us</a>
               </div>
            </div>
             
            
            <div class = "btn-group">
               <button type = "button" class = "btn btn-warning">Warning</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 = "#">Home</a>
                  <a class = "dropdown-item" href = "#">About Us</a>
                  <a class = "dropdown-item" href = "#">Contact Us</a>
               </div>
            </div>
             
            
            <div class = "btn-group">
               <button type = "button" class = "btn btn-danger">Danger</button>
               <button type = "button" class = "btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle = "dropdown">
               </button>
               <div class = "dropdown-menu">
                  <a class = "dropdown-item" href = "#">Home</a>
                  <a class = "dropdown-item" href = "#">About Us</a>
                  <a class = "dropdown-item" href = "#">Contact Us</a>
               </div>
            </div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

It will produce the following result −

Output

Dropdown Sizes and Split Buttons

Dropdown buttons can be displayed in large and small sizes by using btn-lg and btn-sm classes, including split dropdown buttons.

Example

Live Demo 
<html lang = "en">
   <head>
      <!-- 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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Dropdown Sizes and Split Buttons</h2>
         <div class = "btn-group">
            <button class = "btn btn-info btn-lg dropdown-toggle" type = "button" 
               data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">
               
               Large button
            </button>
            <div class = "dropdown-menu">
               <a class = "dropdown-item" href = "#">Home</a>
               <a class = "dropdown-item" href = "#">About Us</a>
               <a class = "dropdown-item" href =" #">Contact Us</a>
            </div>
         </div>
         
         <div class = "btn-group">
            <button class = "btn btn-info btn-lg" type = "button">
               Large split button
            </button>
            
            <button type = "button" class = "btn btn-lg btn-info 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 = "#">Home</a>
               <a class = "dropdown-item" href = "#">About Us</a>
               <a class = "dropdown-item" href = "#">Contact Us</a>
            </div>
         </div>
         <br>
         <br>
         
         <div class = "btn-group">
            <button class = "btn btn-info btn-sm dropdown-toggle" type = "button" 
               data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">
               
               Small button
            </button>
            <div class = "dropdown-menu">
               <a class = "dropdown-item" href = "#">Home</a>
               <a class = "dropdown-item" href = "#">About Us</a>
               <a class = "dropdown-item" href = "#">Contact Us</a>
            </div>
         </div>
         
         <div class = "btn-group">
            <button class = "btn btn-info btn-sm" type = "button">
               Small split button
            </button>
            <button type = "button" class = "btn btn-sm btn-info 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 = "#">Home</a>
               <a class = "dropdown-item" href = "#">About Us</a>
               <a class = "dropdown-item" href = "#">Contact Us</a>
            </div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

It will produce the following result −

Output

Dropdown Directions

You can expand the dropdown menu to upwards by using the class .dropup and also place the dropdown menu at right and left side by using .dropright or .dropleft classes. The following example demonstrates directions of dropdown menu −

Example

Live Demo 
<html lang = "en">
   <head>
      <!-- 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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <br>
         <br>
         
         <h2>Dropdown Directions</h2>
         <br>
         <br>
         
         <div class = "row">
            <div class = "btn-group dropright">
               <button type = "button" class = "btn btn-info dropdown-toggle" 
                  data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">
                  Dropright
               </button>
               
               <div class = "dropdown-menu">
                  <a class = "dropdown-item" href = "#">Home</a>
                  <a class = "dropdown-item" href = "#">About Us</a>
                  <a class = "dropdown-item" href = "#">Contact Us</a>
               </div>
            </div>
             
            
            <div class = "btn-group dropup">
               <button type = "button" class = "btn btn-info dropdown-toggle" 
                  data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">
                  Dropup
               </button>
               <div class = "dropdown-menu">
                  <a class = "dropdown-item" href = "#">Home</a>
                  <a class = "dropdown-item" href = "#">About Us</a>
                  <a class = "dropdown-item" href = "#">Contact Us</a>
               </div>
            </div>
             
            
            <div class = "btn-group dropleft">
               <button type = "button" class = "btn btn-info dropdown-toggle" 
                  data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">
                  
                  Dropleft
               </button>
               <div class = "dropdown-menu">
                  <a class = "dropdown-item" href = "#">Home</a>
                  <a class = "dropdown-item" href = "#">About Us</a>
                  <a class = "dropdown-item" href = "#">Contact Us</a>
               </div>
            </div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

It will produce the following result −

Output

Headers,Dividers and Text

Use the .dropdown-header class to add headers inside the dropdown menu, the .dropdown-divider class adds divider to dropdown menu with a thin horizontal border and the .dropdown-item-text class is used to place text within a dropdown menu.

The following example demonstrates creation of headers,dividers and text by using above classes −

Example

Live Demo 
<html lang = "en">
   <head>
      <!-- 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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Headers</h2>
         <div class = "btn-group dropright">
            <button type = "button" class = "btn btn-info dropdown-toggle" 
               data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">
            
               Headers Example
            </button>
            <div class = "dropdown-menu p-4 text-muted">
               <h6 class = "dropdown-header">This is Header</h6>
               <a class = "dropdown-item" href = "#">Home</a>
               <a class = "dropdown-item" href = "#">About Us</a>
               <a class = "dropdown-item" href = "#">Contact Us</a>  
            </div>
         </div>
         <br>
         <br>
         
         <h2>Dividers</h2>
         <div class = "btn-group dropright">
            <button type = "button" class = "btn btn-info dropdown-toggle" 
               data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">
               
               Dividers Example
            </button>
            <div class = "dropdown-menu">
               <a class = "dropdown-item" href = "#">Home</a>
               <a class = "dropdown-item" href = "#">About Us</a>
               <div class = "dropdown-divider"></div>
               <a class = "dropdown-item" href = "#">Contact Us</a>  
            </div>
         </div>
         <br>
         <br>
         
         <h2>Text</h2>
         <div class = "dropdown">
            <button type = "button" class = "btn btn-info dropdown-toggle" data-toggle = "dropdown">
               Dropdown button
            </button>
            <div class = "dropdown-menu">
               <a class = "dropdown-item" href = "#">Home</a>
               <a class = "dropdown-item" href = "#">About Us</a>
               <a class = "dropdown-item-text" href = "#">This is Text Link</a>
               <span class = "dropdown-item-text" href = "#">Thi is just Text</span>
            </div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

It will produce the following result −

Output

Active and Disabled item

You can make the items as active by adding .active class to the items in the dropdown menu and use the .disabled class to disable the item in dropdown menu.

The following example demonstrates active and disabled item in the dropdown menu −

Example

Live Demo 
<html lang = "en">
   <head>
      <!-- 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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Active and Disabled item</h2>
         <div class = "dropdown">
            <button type = "button" class = "btn btn-info dropdown-toggle" 
               data-toggle = "dropdown">
            
               Dropdown button
            </button>
            
            <div class = "dropdown-menu">
               <a class = "dropdown-item" href = "#">Home</a>
               <a class = "dropdown-item active" href = "#">About Us - Active Item</a>
               <a class = "dropdown-item disabled" href = "#">Contct Us - Disabled Item</a>
            </div>
            
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

It will produce the following result −

Output

bootstrap4_components.htm
Advertisements