How can I modify design of bootstrap dropdown button

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><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

How can I modify it according to above picture?

You can create a new class into your css file (.myButton) for example and add it to your button class="". After that you can change colors, borders, ... — RedLens834, Nov 24 '16 at 15:01
you need to override bootstrap css, write your own css for the same classes — Luka, Nov 24 '16 at 15:01

score 0 · Answer 1 · answered Nov 24 '16 at 15:06

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><a href="#"><i class="fa fa-cog"></i>Action</a></li>
    <li><a href="#"><i class="fa fa-cog"></i>Action</a></li>
    <li><a href="#"><i class="fa fa-cog"></i>Action</a></li>
    <li><a href="#"><i class="fa fa-cog"></i>Action</a></li>
    <li><a href="#"><i class="fa fa-cog"></i>Action</a></li>
  </ul>
</div>

score 0 · Answer 2 · edited May 23 '17 at 11:53

0

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><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></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?

edited May 23 '17 at 11:53

Community

1
1

answered Nov 24 '16 at 15:08

Danu Akbar

196
1
2
14

Thank you for your answer. I am testing your first example but there is something I cannot solve. When I click the button, it still shows the default bootstrap button css. Can you check this link: https://jsfiddle.net/DTcHh/27339/ – Eniss Nov 24 '16 at 15:24
I cannot see the updated version of my jsfiddle link – Eniss Nov 24 '16 at 15:41
My question is that when I click the button(?), background color of the button(?) becomes gray while clicking. Default one is blue but while clicking, it becomes gray. I need to also make it blue while clicking. As you see in the link, I edited `question:hover, .question:visited, .question:active, .question:link`, but it still becomes gray while clicking. – Eniss Nov 24 '16 at 15:50
use this `.question:hover, .question:focus, .open .dropdown-toggle.question { background-color: blue }` look a this: https://jsfiddle.net/a9eyhbv9/ – Danu Akbar Nov 24 '16 at 16:04

How can I modify design of bootstrap dropdown button

2 Answers2