Ask any question about Bootstrap here... and get an instant response.
Post this Question & Answer:
How can I customize the appearance of Bootstrap's dropdown menu items?
Asked on Jan 29, 2026
Answer
To customize the appearance of Bootstrap's dropdown menu items, you can use custom CSS to override the default styles. Here's a simple example to get you started.
<!-- BEGIN COPY / PASTE -->
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item custom-dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item custom-dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item custom-dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<style>
.custom-dropdown-item {
color: #ff5722; /* Custom text color */
background-color: #f5f5f5; /* Custom background color */
}
.custom-dropdown-item:hover {
color: #ffffff; /* Text color on hover */
background-color: #ff5722; /* Background color on hover */
}
</style>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- Use the `custom-dropdown-item` class to apply custom styles to dropdown items.
- Modify `color` and `background-color` properties to fit your design needs.
- Ensure to include hover styles for better user interaction.
- Remember to include Bootstrap's CSS and JS files for the dropdown functionality to work.
Recommended Links:
