Bootstrap 4 Dropdowns

Welcome to The Coding College! Dropdowns are one of the most essential components in Bootstrap 4. They allow you to create interactive menus, buttons, and navigation elements in your web applications. This guide will cover everything you need to know about creating, customizing, and optimizing dropdowns in Bootstrap 4.

What Are Dropdowns in Bootstrap 4?

A dropdown is a toggleable menu that appears when the user clicks or hovers on a button or link. Bootstrap 4 makes it simple to create dropdown menus that are fully responsive and feature-rich.

Basic Dropdown

To create a dropdown, you need a parent container with the .dropdown class and a toggleable element, such as a button, with the .dropdown-toggle class. You must also include the data-toggle="dropdown" attribute.

Example:

<div class="dropdown">  
  <button class="btn btn-primary dropdown-toggle" type="button" 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>

Explanation:

  • .dropdown: The container for the dropdown menu.
  • .dropdown-toggle: Creates the button that toggles the dropdown.
  • data-toggle="dropdown": Enables the dropdown functionality.
  • .dropdown-menu: The container for dropdown items.
  • .dropdown-item: Styles each item inside the dropdown menu.

Dropdown Variations

Bootstrap 4 allows you to customize dropdowns in several ways, such as changing alignment or adding headers, dividers, and disabled items.

1. Right-Aligned Dropdown

By default, dropdowns are left-aligned. To align the menu to the right, use the .dropdown-menu-right class.

<div class="dropdown">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Right-Aligned Dropdown</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>

2. Dropdown with Headers and Dividers

You can group menu items using headers and dividers.

<div class="dropdown">  
  <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">Dropdown with Headers</button>  
  <div class="dropdown-menu">  
    <h6 class="dropdown-header">Group 1</h6>  
    <a class="dropdown-item" href="#">Action 1</a>  
    <a class="dropdown-item" href="#">Action 2</a>  
    <div class="dropdown-divider"></div>  
    <h6 class="dropdown-header">Group 2</h6>  
    <a class="dropdown-item" href="#">Action 3</a>  
  </div>  
</div>

3. Disabled Items in Dropdowns

To disable a dropdown item, add the .disabled class.

<div class="dropdown">  
  <button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown">Dropdown with Disabled Items</button>  
  <div class="dropdown-menu">  
    <a class="dropdown-item" href="#">Enabled Item</a>  
    <a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled Item</a>  
  </div>  
</div>

Split Button Dropdown

Split buttons allow you to combine a regular button with a dropdown menu.

Example:

<div class="btn-group">  
  <button class="btn btn-warning">Action</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>

Dropdowns in Navbar

Dropdowns are commonly used in navigation bars. Here’s how you can integrate them.

Example:

<nav class="navbar navbar-expand-lg navbar-light bg-light">  
  <a class="navbar-brand" href="#">Navbar</a>  
  <div class="collapse navbar-collapse">  
    <ul class="navbar-nav">  
      <li class="nav-item dropdown">  
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Dropdown</a>  
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">  
          <a class="dropdown-item" href="#">Action</a>  
          <a class="dropdown-item" href="#">Another Action</a>  
        </div>  
      </li>  
    </ul>  
  </div>  
</nav>

Dropdowns with Forms

Dropdowns can also include forms, such as search bars or login forms.

Example:

<div class="dropdown">  
  <button class="btn btn-dark dropdown-toggle" type="button" data-toggle="dropdown">Dropdown with Form</button>  
  <div class="dropdown-menu p-4">  
    <form>  
      <div class="form-group">  
        <label for="dropdownFormEmail">Email address</label>  
        <input type="email" class="form-control" id="dropdownFormEmail" placeholder="Enter email">  
      </div>  
      <div class="form-group">  
        <label for="dropdownFormPassword">Password</label>  
        <input type="password" class="form-control" id="dropdownFormPassword" placeholder="Password">  
      </div>  
      <button type="submit" class="btn btn-primary">Sign in</button>  
    </form>  
  </div>  
</div>

Responsive Behavior

Dropdowns in Bootstrap 4 are fully responsive and automatically adjust their position based on the viewport size.

Practical Example: A Complete Dropdown Layout

Here’s a full example combining different dropdown variations:

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>Bootstrap 4 Dropdowns</title>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">  
</head>  
<body>  
  <div class="container my-5">  
    <h1 class="text-center text-primary">Bootstrap 4 Dropdowns</h1>  

    <!-- Basic Dropdown -->  
    <div class="dropdown mb-3">  
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Basic Dropdown</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>  

    <!-- Dropdown with Headers and Dividers -->  
    <div class="dropdown mb-3">  
      <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown with Headers</button>  
      <div class="dropdown-menu">  
        <h6 class="dropdown-header">Group 1</h6>  
        <a class="dropdown-item" href="#">Item 1</a>  
        <div class="dropdown-divider"></div>  
        <h6 class="dropdown-header">Group 2</h6>  
        <a class="dropdown-item" href="#">Item 2</a>  
      </div>  
    </div>  

    <!-- Split Button Dropdown -->  
    <div class="btn-group mb-3">  
      <button class="btn btn-success">Action</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="#">Split Action 1</a>  
        <a class="dropdown-item" href="#">Split 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/@popperjs/[email protected]/dist/umd/popper.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>  
</body>  
</html>

Conclusion

Bootstrap 4 Dropdowns are an essential tool for creating dynamic and interactive user interfaces. From basic dropdowns to advanced customizations, this guide has covered everything you need to get started.

Leave a Comment