How to use HTML and CSS only In Bootstrap
To add headers inside the dropdown menu, use the dropdown-header class in Bootstrap. so you can try the following code to implement the dropdown-header class in Bootstrap.
Example: This approach uses HTML utilizes <button> for dropdown activation and <ul> for the menu items. the CSS styles the dropdown to show/hide on hover/focus and positions it below the button.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container">
<h2>w3wiki</h2>
<p>The following are the w3wiki dropdown properties:</p>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle"
type="button"
data-toggle="dropdown">Dropdown
<span class="caret"></span></button>
<ul class="dropdown-menu bg-light">
<li class="dropdown-header text-primary">DSA course</li>
<li><a class="dropdown-item"
href="#">Practice Section</a></li>
<li><a class="dropdown-item"
href="#">Career</a></li>
<li><a class="dropdown-item"
href="#">Menu</a></li>
<div class="dropdown-divider"></div>
<li class="dropdown-header text-primary">Playlist</li>
<li><a class="dropdown-item"
href="#">Interview Preparation</a></li>
<li><a class="dropdown-item"
href="#">STL Concept</a></li>
</ul>
</div>
</div>
</body>
</html>
Output:
How to Add Headers inside the Dropdown Menu in Bootstrap ?
Drop-down menus are a common element used in web development to provide users with a list of options. Adding headers inside a drop-down menu can improve its organization and usability. This means to add headers inside the dropdown menu, use the .dropdown-header class in Bootstrap.
Table of Content
- Using HTML and CSS only
- Utilizing JavaScript and jQuery
- Using Bootstrap 5’s dropdown group component