About Lesson
Introduction to Bootstrap 5 Dropdowns
.dropdown→ The container for the dropdown.dropdown-toggle→ Button that toggles the dropdown.dropdown-menu→ The dropdown list.dropdown-item→ Individual items inside the dropdown
Example: Card with Header & Footer
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Dropdown</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Dropdown Button
</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>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Output:
Explanation:
.dropdown→ Creates a dropdown container.dropdown-toggle→ Button that triggers the dropdowndata-bs-toggle="dropdown"→ Enables Bootstrap dropdown functionality.dropdown-menu→ Dropdown list.dropdown-item→ Defines menu items