Dropdowns in Bootstrap 4 allow users to toggle a menu by clicking a button or link.
They are commonly used for navigation menus, filters, and actions. Dropdowns support various alignments, headers, dividers, disabled items, and hover effects.
What This Tutorial Covers:
- Basic Bootstrap 4 dropdown
- Dropdown with different button styles
- Dropdown with links and dividers
- Right-aligned dropdown
- Dropdown inside a navbar
- Dropdown with a search form
- Hover dropdown (custom JavaScript)
- Custom styling for dropdowns
1. Basic Bootstrap 4 Dropdown
To create a dropdown, use:
- .dropdown as the wrapper
- .dropdown-toggle for the toggle button
- .dropdown-menu for the dropdown container
- .dropdown-item for menu items
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 4 Dropdown</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown Menu
</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>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Explanation:
- .dropdown-toggle makes the button toggle the dropdown.
- .dropdown-menu holds the menu items.
- .dropdown-item styles individual links.
2. Dropdown with Different Button Styles
You can use different button styles for dropdowns.
Example:
<div class="dropdown">
<button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">
Success Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
<div class="dropdown">
<button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">
Danger Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
Available Button Colors:
| Class | Button Color |
|---|---|
| btn-primary | Blue |
| btn-secondary | Gray |
| btn-success | Green |
| btn-danger | Red |
| btn-warning | Yellow |
| btn-info | Light Blue |
3. Dropdown with Links and Dividers
Use .dropdown-divider to separate groups of menu items.
Example:
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown">
Menu with Divider
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">First Item</a>
<a class="dropdown-item" href="#">Second Item</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated Item</a>
</div>
</div>
4. Right-Aligned Dropdown
By default, dropdowns are left-aligned. Use .dropdown-menu-right to align it to the right.
Example:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
Right Aligned
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another Action</a>
</div>
</div>
5. Dropdown Inside a Navbar
Dropdowns can be placed inside a Bootstrap navbar.
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" data-toggle="dropdown">
Dropdown
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another Action</a>
</div>
</li>
</ul>
</div>
</nav>
6. Dropdown with Search Form
Dropdowns can include forms for search bars or login fields.
Example:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Search
</button>
<div class="dropdown-menu p-3">
<form>
<input type="text" class="form-control" placeholder="Search">
</form>
</div>
</div>
Explanation:
- p-3 adds padding around the form.
- The dropdown stays open while users type.
7. Hover Dropdown (Custom JavaScript)
By default, dropdowns open on click. You can make them open on hover with JavaScript.
Example:
<div class="dropdown">
<button class="btn btn-warning dropdown-toggle" type="button">
Hover Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
<script>
$(document).ready(function(){
$(".dropdown").hover(function(){
$(this).find(".dropdown-menu").toggleClass("show");
});
});
</script>
Explanation:
- The dropdown opens on hover instead of click.
8. Custom Styling for Dropdowns
You can customize dropdown colors, borders, and fonts with CSS.
Example:
<style>
.custom-dropdown .dropdown-menu {
background-color: #ff5733;
color: white;
}
.custom-dropdown .dropdown-item {
color: white;
}
.custom-dropdown .dropdown-item:hover {
background-color: #cc2900;
}
</style>
<div class="dropdown custom-dropdown">
<button class="btn btn-dark dropdown-toggle" type="button" data-toggle="dropdown">
Custom Styled
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Custom Item</a>
</div>
</div>
Explanation:
- .custom-dropdown .dropdown-menu changes the background color.
- .custom-dropdown .dropdown-item:hover changes the hover effect.
