Cant change the button color in bootstrap - html

Question

I have cretaed this button in Bootstrap.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-3">
<div class="dropdown2">
<button class="btn btn-default dropdown-toggle glyphicon glyphicon-shopping-cart" type="button" data-toggle="dropdown">Carello (99)
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li class="dropdown-header">Dropdown header 1</li>
</ul>
</div>
</div>
I have used some Bootstrap classes for buttons but when I try to change the color of this button in css nothing seems to happen.. How is it possible to change the color of this button in Bootstrap?
Here is my css :
.dropdown-menu{
background: #ff6600;
}
Thanks!

Answer 1

You need to override the css. And I suggest you not to use glyphicon classes on button directly instead use a <i></i> inside the button and set the class on it like in this answer. This way you will get proper alignment. Yours was having some alignment problem
.btn.btn-default,
.btn.btn-default:focus{
background-color:#0066ff;
color:#fff;
}
.btn.btn-default:active,
.btn.btn-default.dropdown-toggle:active,
.btn.btn-default:hover{
background-color:#0099ff;
color:#fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-3">
<div class="dropdown2">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"><i class="glyphicon glyphicon-shopping-cart""></i> Carello (99)
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li class="dropdown-header">Dropdown header 1</li>
</ul>
</div>
</div>

Answer 2

You are currently using .btn-default. Now you could make use of any of the other default Bootstrap button colors: .btn-primary, .btn-info, .btn-success, .btn-warning, .btn-danger.
Alternatively, you can modify the color of this button to a color of your choosing by writing a style for:
.dropdown2 .btn-default {
background: YOURCOLORHERE;
color: YOURCOLORHERE;
}

Answer 3

Add the required styles like below.
button.btn {
background-color: coral;
color: white;
border-color: red;
}
button.btn:hover {
background-color: darkviolet;
color: white;
border-color: darkviolet;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-3">
<div class="dropdown2">
<button class="btn btn-default dropdown-toggle glyphicon glyphicon-shopping-cart" type="button" data-toggle="dropdown"> Carello (99)
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li class="dropdown-header">Dropdown header 1</li>
</ul>
</div>
</div>