-
BS Grid Basic
-
BS Typography
-
BS Tables
-
BS Images
-
BS Jumbotron
-
BS Alerts
-
BS Forms
-
BS Floating Labels
-
BS Form Validation
-
BS Buttons
-
BS Button Groups
-
BS Badges
-
BS Progress Bars
-
BS Spinnier
-
BS Pagination
-
BS List Groups
-
BS Cards
-
BS Dropdowns
-
BS Collapse
-
BS Navs
-
BS Navbar
-
BS Carousel
-
BS Modal
-
BS Tooltip
-
BS Panels
-
BS Popover
-
BS Toast
-
BS Scrollspy
-
BS OffCanvas
-
BS Utilities
-
BS Flex
Introduction to Bootstrap Dropdowns
Bootstrap Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They are versatile and can be triggered by a click or a hover action. Dropdowns are commonly used for things like user menus, navigation headers, or any other place where a compact list of options is needed.
Key Classes and Components of Bootstrap Dropdowns
Here’s an overview of the primary classes and components used in Bootstrap dropdowns:
– `.dropdown`: The container class for the dropdown.
– `.dropdown-toggle`: Applied to the element that triggers the dropdown.
– `.dropdown-menu`: Contains the dropdown content, usually an unordered list.
– `.dropdown-item`: Applied to each actionable item within the dropdown menu.
– `.dropdown-divider`: Creates a divider line between dropdown items, useful for grouping related links.
– `.dropdown-header`: Adds a non-clickable header within the dropdown menu, useful for labeling sections.
Examples of Bootstrap Dropdowns
Basic Dropdown
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Dropdown Example</title>
<link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”dropdown”>
<button class=”btn btn-secondary dropdown-toggle” type=”button” id=”dropdownMenuButton” data-toggle=”dropdown” aria-haspopup=”true” aria-expanded=”false”>
Dropdown button
</button>
<div class=”dropdown-menu” aria-labelledby=”dropdownMenuButton”>
<a class=”dropdown-item” href=”#”>Action</a>
<a class=”dropdown-item” href=”#”>Another action</a>
<a class=”dropdown-item” href=”#”>Something else here</a>
</div>
</div>
<!– Include jQuery –>
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js”></script>
<!– Include Popper.js –>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js”></script>
<!– Include Bootstrap JS –>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js”></script>
</body>
</html>
– This code creates a basic dropdown button.
– The `dropdown-toggle` class and `data-toggle=”dropdown”` attribute are used on the button to enable dropdown functionality.
Dropdown with Headers and Dividers
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Dropdown Example</title>
<link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”dropdown”>
<button class=”btn btn-primary dropdown-toggle” type=”button” data-toggle=”dropdown”>
Dropdown with Sections
</button>
<div class=”dropdown-menu”>
<h6 class=”dropdown-header”>Header 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”>Header 2</h6>
<a class=”dropdown-item” href=”#”>Action 3</a>
</div>
</div>
<!– Include jQuery –>
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js”></script>
<!– Include Popper.js –>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js”></script>
<!– Include Bootstrap JS –>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js”></script>
</body>
</html>
– This example includes headers (`dropdown-header`) and a divider (`dropdown-divider`) to organize the dropdown menu into sections.
Dropdown Alignment
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Dropdown Example</title>
<link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”dropdown”>
<button class=”btn btn-info dropdown-toggle” type=”button” data-toggle=”dropdown”>
Right-Aligned Dropdown
</button>
<div class=”dropdown-menu dropdown-menu-right”>
<a class=”dropdown-item” href=”#”>Link 1</a>
<a class=”dropdown-item” href=”#”>Link 2</a>
</div>
</div>
<!– Include jQuery –>
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js”></script>
<!– Include Popper.js –>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js”></script>
<!– Include Bootstrap JS –>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js”></script>
</body>
</html>
– The `dropdown-menu-right` class aligns the dropdown menu to the right of the button, which is useful for dropdowns on the far right side of the page.
When working with Bootstrap dropdowns, it’s important to remember several key points to ensure they function correctly:
1.Include Necessary Libraries:
-Bootstrap CSS: Include the Bootstrap CSS file in the `<head>` of your HTML document.
-jQuery: Bootstrap’s JavaScript requires jQuery. Make sure to include it before Bootstrap’s JavaScript file.
-Popper.js (for Bootstrap 4): Bootstrap 4 requires Popper.js for tooltips and popovers (including dropdowns). Include it after jQuery and before Bootstrap’s JavaScript.
-Bootstrap JavaScript: This is necessary for enabling the interactive components like dropdowns.
2.Proper HTML Structure:
-Follow Bootstrap’s specified structure for dropdowns, including the use of classes like `.dropdown`, `.dropdown-toggle`, and `.dropdown-menu`.
3.Data Attributes:
– Use the `data-toggle=”dropdown”` attribute on the element (usually a button or link) that triggers the dropdown.
4. Placement of Scripts:
– Load the JavaScript files at the end of your HTML document, just before the closing `</body>` tag. This ensures that the entire DOM is loaded before the scripts execute.
5.Browser Compatibility:
– Ensure that your browser supports the version of Bootstrap you are using. Some features might not be compatible with older browsers.
6.Version Specificity:
– Bootstrap 3 and Bootstrap 4/5 have some differences in how they handle dropdowns, so ensure you’re following the correct guidelines for your specific version.
By keeping these points in mind, you can effectively implement and troubleshoot Bootstrap dropdowns in your web projects.
YouTube Reference :
