English

Bootstrap Tutorial

Bootstrap Layouts

Bootstrap Content

Bootstrap Components

Bootstrap Forms

Bootstrap Helpers

Bootstrap Utilities

Bootstrap Demos

Bootstrap - Dropdowns: A Beginner's Guide

Hello there, future web developers! Today, we're going to dive into the wonderful world of Bootstrap dropdowns. As your friendly neighborhood computer teacher, I'm excited to guide you through this journey. Don't worry if you've never written a line of code before – we'll start from scratch and build our way up. So, grab a cup of coffee (or tea, if that's your thing), and let's get started!

Bootstrap - Dropdowns

What are Dropdowns?

Before we jump into the code, let's talk about what dropdowns are. Imagine you're at a restaurant, and the waiter hands you a menu. That menu is like a dropdown – it gives you a list of options to choose from. In web design, dropdowns work similarly. They're compact ways to present multiple choices to users without cluttering up your webpage.

Basic Dropdown

Let's start with the most basic dropdown. Here's what it looks like in Bootstrap:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Let's break this down:

  1. We start with a <div> with the class dropdown. This is our container.
  2. Inside, we have a <button> that triggers the dropdown. Notice the dropdown-toggle class and data-bs-toggle="dropdown" attribute.
  3. The <ul> with class dropdown-menu is our actual dropdown content.
  4. Each <li> inside the <ul> is an item in our dropdown menu.

Dropdown Button vs. Dropdown Link

You can create a dropdown using either a button or a link. Here's how they differ:

Dropdown Button

We've already seen this in our basic example. It uses the <button> element:

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <!-- Menu items -->
  </ul>
</div>

Dropdown Link

For a link-based dropdown, we use an <a> tag instead:

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <!-- Menu items -->
  </ul>
</div>

The main difference is the HTML element used (<button> vs. <a>), but they function similarly.

Variants

Bootstrap offers various color variants for your dropdowns. You can change the btn-secondary class to any of these:

  • btn-primary
  • btn-success
  • btn-info
  • btn-warning
  • btn-danger
  • btn-light
  • btn-dark

For example:

<div class="dropdown">
  <button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Danger Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <!-- Menu items -->
  </ul>
</div>

Split Button

A split button dropdown separates the button action from the dropdown toggle:

<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-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Menu items -->
  </ul>
</div>

Here, clicking the left part of the button performs an action, while the right part opens the dropdown.

Sizing

You can create larger or smaller dropdowns by adding btn-lg or btn-sm classes:

Large Dropdown Button

<div class="dropdown">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" id="dropdownMenuButtonLarge" data-bs-toggle="dropdown" aria-expanded="false">
    Large Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLarge">
    <!-- Menu items -->
  </ul>
</div>

Small Dropdown Button

<div class="dropdown">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" id="dropdownMenuButtonSmall" data-bs-toggle="dropdown" aria-expanded="false">
    Small Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonSmall">
    <!-- Menu items -->
  </ul>
</div>

Dark Dropdown

For a sleek, dark-themed dropdown, add the dropdown-menu-dark class to your dropdown-menu:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dark Dropdown
  </button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton">
    <!-- Menu items -->
  </ul>
</div>

Directions

Bootstrap allows you to change the direction of your dropdowns. Let's explore these options:

Centered Dropdowns

To center-align your dropdown menu, add dropdown-center class to the container:

<div class="dropdown-center">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownCenteredButton" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownCenteredButton">
    <!-- Menu items -->
  </ul>
</div>

Dropup

For a dropdown that opens upwards, use the dropup class:

<div class="dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropupMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropupMenuButton">
    <!-- Menu items -->
  </ul>
</div>

Dropup Centered

Combine dropup and dropdown-center for a centered dropup:

<div class="dropup-center dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropupCenteredButton" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropup
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropupCenteredButton">
    <!-- Menu items -->
  </ul>
</div>

Dropend

For a dropdown that opens to the right, use the dropend class:

<div class="dropend">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropendMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropendMenuButton">
    <!-- Menu items -->
  </ul>
</div>

Dropstart

For a dropdown that opens to the left, use the dropstart class:

<div class="dropstart">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropstartMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropstartMenuButton">
    <!-- Menu items -->
  </ul>
</div>

Menu Items

Now, let's talk about what goes inside your dropdown menu. You have several options:

Headers

Add a header to group menu items:

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Dropdown header</h6></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
</ul>

Dividers

Use dividers to separate groups of related menu items:

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>

Text

You can also include non-interactive text:

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
  <li><span class="dropdown-item-text">Dropdown item text</span></li>
</ul>

Forms

You can even include forms in your dropdowns:

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>

Menu Alignment

By default, dropdown menus are left-aligned. You can change this with alignment classes:

Right-aligned Menu

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
    <!-- Menu items -->
  </ul>
</div>

Responsive Alignment

You can also make the alignment responsive:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end" aria-labelledby="dropdownMenuButton">
    <!-- Menu items -->
  </ul>
</div>

This dropdown will be left-aligned by default, but right-aligned on large screens and up.

Dropdown Options

Bootstrap dropdowns come with some additional options:

Auto Close Behavior

You can control how the dropdown closes with the data-bs-auto-close attribute:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <!-- Menu items -->
  </ul>
</div>

Options for data-bs-auto-close:

  • true (default): Closes the dropdown when clicking outside or inside the dropdown
  • false: Dropdown will not close when clicking outside or inside
  • inside: Closes the dropdown when clicking inside the dropdown
  • outside: Closes the dropdown when clicking outside the dropdown

And there you have it! You've just completed a whirlwind tour of Bootstrap dropdowns. Remember, practice makes perfect, so don't be afraid to experiment with these examples. Happy coding, and may your dropdowns always drop in the right direction!

Credits: Image by storyset

Previous Tutorial:
Bootstrap - Collapse
Next Tutorial:
Bootstrap - List Group