Bootstrap Dropdowns

17 April 2025 | Category: Bootstrap

Bootstrap Tutorial: Create Interactive Dropdown

In this Bootstrap tutorial, you’ll learn how to use Bootstrap’s Dropdown classes to create interactive menus for navigation or actions. We’ll pair dropdowns with images to make your webpage pop.

What You’ll Learn

Creating a basic dropdown
Styling dropdowns with colors
Adding dividers and headers
Combining dropdowns with images

Prerequisites

Basic knowledge of HTML
A text editor (e.g., VS Code, Notepad)
A web browser (e.g., Chrome, Firefox)

Step 1: Understand Bootstrap Dropdowns

Bootstrap Dropdowns use the dropdown class with dropdown-menu and dropdown-item to create toggleable menus. They’re ideal for navigation, settings, or user actions, triggered by buttons or links.

Assume Bootstrap CSS and JS are included in your project (we’ll skip the <link> and <script> tags as requested).

Step 2: Create a Basic Dropdown

Start with a simple dropdown menu. Use this code:

<div class="container">
    <h3>Basic Dropdown</h3>
    <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
            Menu
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Option 1</a></li>
            <li><a class="dropdown-item" href="#">Option 2</a></li>
            <li><a class="dropdown-item" href="#">Option 3</a></li>
        </ul>
    </div>
</div>

Explanation:

container: Centers and constrains content.
dropdown: Wraps the dropdown button and menu.
btn btn-primary dropdown-toggle: Blue button that triggers the menu.
data-bs-toggle="dropdown": Enables dropdown functionality.
dropdown-menu and dropdown-item: Style the menu and its clickable items.

Clicking the button reveals the menu.

Step 3: Style Dropdowns with Colors

Use different button colors for visual variety. Try this:

<div class="container">
    <h3>Colored Dropdown</h3>
    <div class="dropdown">
        <button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown">
            Actions
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">View</a></li>
            <li><a class="dropdown-item" href="#">Edit</a></li>
            <li><a class="dropdown-item" href="#">Delete</a></li>
        </ul>
    </div>
</div>

Explanation:

btn btn-success: Green button for positive actions.
dropdown-menu: Keeps the menu neutral for contrast.
dropdown-item: Styles each menu link.

The green button makes the dropdown stand out.

Step 4: Add Dividers and Headers

Enhance the dropdown with dividers and headers for organization. Add this:

<div class="container">
    <h3>Organized Dropdown</h3>
    <div class="dropdown">
        <button class="btn btn-info dropdown-toggle" type="button" data-bs-toggle="dropdown">
            Settings
        </button>
        <ul class="dropdown-menu">
            <li><h6 class="dropdown-header">Account</h6></li>
            <li><a class="dropdown-item" href="#">Profile</a></li>
            <li><a class="dropdown-item" href="#">Security</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Logout</a></li>
        </ul>
    </div>
</div>

Explanation:

btn btn-info: Cyan button for informational actions.
dropdown-header: Adds a non-clickable header (“Account”).
dropdown-divider: Inserts a horizontal line to separate items.

This organizes the menu for clarity.

Step 5: Combine with an Image

Pair a dropdown with a dummy image for context. Try this:

<div class="container">
    <div class="row">
        <div class="col-8">
            <h3>User Menu</h3>
            <p>Manage your account options.</p>
            <div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                    Account
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">View Profile</a></li>
                    <li><a class="dropdown-item" href="#">Settings</a></li>
                    <li><a class="dropdown-item" href="#">Sign Out</a></li>
                </ul>
            </div>
        </div>
        <div class="col-4">
            <img src="https://placehold.co/200x150/28a745/ffffff" class="img-fluid rounded" alt="Green placeholder">
        </div>
    </div>
</div>

Explanation:

row and col-8, col-4: Splits content into dropdown/text (8 units) and image (4 units).
btn btn-primary dropdown-toggle: Blue button for the dropdown.
Uses a 200×150 green image for vibrancy.

The image suggests a user profile context.

Final Code

Here’s a combined example with varied dropdowns and an image:

<div class="container">
    <div class="row mb-3">
        <div class="col-12">
            <h3>Simple Dropdown</h3>
            <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                    Options
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Item 1</a></li>
                    <li><a class="dropdown-item" href="#">Item 2</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-12">
            <h3>Organized Dropdown</h3>
            <div class="dropdown">
                <button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown">
                    Tools
                </button>
                <ul class="dropdown-menu">
                    <li><h6 class="dropdown-header">Utilities</h6></li>
                    <li><a class="dropdown-item" href="#">Download</a></li>
                    <li><a class="dropdown-item" href="#">Share</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#">Reset</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-7">
            <h3>Project Menu</h3>
            <p>Select a project action.</p>
            <div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                    Projects
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">New</a></li>
                    <li><a class="dropdown-item" href="#">Open</a></li>
                    <li><a class="dropdown-item" href="#">Save</a></li>
                </ul>
            </div>
        </div>
        <div class="col-5">
            <img src="https://placehold.co/250x150/ff6b6b/ffffff" class="img-fluid rounded" alt="Red placeholder">
        </div>
    </div>
</div>

Output

Your webpage should show:

A row with a gray dropdown button (Options) and a simple menu.
A row with a green dropdown button (Tools) and an organized menu with a header and divider.
A two-column section with a blue dropdown button (Projects), text, and a red image (250×150).
All dropdowns are responsive, adjusting for mobile, with colorful images for a vibrant look.

Next Steps

Check the Bootstrap Dropdowns Docs for more options.
Try dropup for upward-opening menus.
Use dropdowns in Bootstrap navbars for advanced navigation.

Conclusion

You’ve mastered Bootstrap Dropdowns! With classes like dropdown, dropdown-menu, and dropdown-item, plus striking images, you’ve created interactive, stylish menus. Keep experimenting to enhance your webpages.