How can I modify design of bootstrap dropdown button - html

Question

I am new to front-end. I want to modify design of bootstrap dropdown button like this:
picture
Bootstrap dropdown code:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
How can I modify it according to above picture?

Answer 1

see my code below or this fiddle for working demo
.dropdown-menu>li>a{
color: red;
padding: 3px 10px;
}
.dropdown-menu>li>a .fa{
margin-right: 5px;
}
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><i class="fa fa-cog"></i>Action</li>
<li><i class="fa fa-cog"></i>Action</li>
<li><i class="fa fa-cog"></i>Action</li>
<li><i class="fa fa-cog"></i>Action</li>
<li><i class="fa fa-cog"></i>Action</li>
</ul>
</div>

Answer 2

There's many ways..
Create a new CSS class with your own style and then add the class to your default jquery dropdown
Overide jquery class
Ex for number 1:
Create new CSS class:
.newDropdown {
background-color: #ddd;
color: #fff
border: 1px solid #000
}
then add .newDropdown to your html
<ul class="dropdown-menu newDropdown" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
Ex for number 2:
Just overide the class:
.dropdown-menu {
background-color: #777;
}
.dropdown-menu li {
padding: 10px
}
Or you can read this answer for reference (even they're using select): How to style a <select> dropdown with CSS only without JavaScript?