Bootstrap Dropdown with Icon
Bootstrap Dropdown with Icon:A Bootstrap dropdown with an icon is a user interface element that combines a dropdown menu with a visually appealing icon. It allows users to select an option from a list that is revealed when they click or hover over the dropdown toggle. The icon enhances the usability and aesthetics of the dropdown, providing a visual cue to indicate its purpose or content.




Thanks for your feedback!
Your contributions will help us to improve service.
How can I create a Bootstrap dropdown menu that includes icons?
This code snippet demonstrates the implementation of a Bootstrap dropdown menu with icons. The HTML structure consists of a container div with a centered text, followed by a dropdown div.
Inside the dropdown, there is a button with the "btn" and "dropdown-toggle" classes, along with a dropdown menu ul.
The button includes an icon using the Bootstrap Icons library (represented by the "bi" class). The dropdown menu contains three list items, each with a link and an icon. The icons are also specified using the Bootstrap Icons classes.
Bootstrap Dropdown with Icon Example
<div class="container text-center">
<h3>Bootstrap Dropdown with Icon</h3>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical"></i> Actions
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#"><i class="bi bi-pencil-fill"></i> Edit</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-trash-fill"></i> Delete</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-eye-fill"></i> View</a></li>
</ul>
</div>
</div>