Bootstrap change Dropdown Menu Background Color
Bootstrap change Dropdown Menu Background Color: Sometimes we need to change the dropdown menu background color in Bootstrap. There are many ways to do this, You can create your own class to change the background color of the Bootstrap dropdown Menu background Color. Here in this tutorial we are going to explain how you can change background color of dropdown menu color. You can also use our online editor to edit and run the code online.
Bootstrap change Dropdown Menu Background Color Example
You can change the background color of the dropdown menu by simply adding the following class(css)-
Bootstrap change Dropdown Menu Background Color Example:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Demo Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Logout</a></li>
</ul>
</div>
<style type="text/css">
ul.dropdown-menu {
background-color: yellow;
}
</style>
|
The above css will change the background color of the dropdown menu. If you run the above example it will produce output something like this –
Note: In the above example it will change the background color of all dropdown menus if there are more than one dropdown, so if you want to change the background of only few menus just create a class and add background color then add this class to the dropdown menu simply as below –
Bootstrap change Dropdown Menu Background Color Example:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Demo Example
<span class="caret"></span></button>
<ul class="dropdown-menu change-dropdown-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Logout</a></li>
</ul>
</div>
<style type="text/css">
.change-dropdown-menu {
background-color: yellow;
}
</style>
|
Advertisements
