How do I override bootstrap?

Question

The following code turns the button text a dark color when the button is selected. I assume this comes from code embedded in Bootstrap's btn class. How can I override the code to stop the text from changing color after the button is selected?

<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
    .buttonColor{
    color:#ff0000;
}   
.buttonColor:hover{
    color:#ffff00;
}
</style>
</head>
<body>
    <button  class="buttonColor btn" > Submit</button>
</body>
</html>

Be more ***specific*** in your override styles. – Paulie_D Apr 27 '16 at 15:10 — Paulie_D, Apr 27 '16 at 15:10

score 1 · Answer 1 · edited May 23 '17 at 12:16

This is a common question: How to overwrite styling in Twitter Bootstrap, best way to override bootstrap css, the list goes on.

Read up on the CSS law of specifity. Essentially, if you're more specific in your class declaration, you can override others that are targeting the same elements:

In your example:

button.buttonColor.btn {
    color: red;
    padding: 50px;
}

Will override BootStrap's button.btn declaration.

Similarly, add pseudo selectors to override other states:

button.buttonColor.btn:active, button.buttonColor.btn:hover, etc

score 0 · Answer 2 · answered Apr 27 '16 at 15:11

0

Assuming that by "selected" you mean the active state of a button, this is how you achieve it:

.buttonColor:active {
    color: #ffff00;
}

answered Apr 27 '16 at 15:11

Simone

20,302
14
79
103

Rion Williams · Answer 3 · 2016-04-27T18:44:06.403

Bootstrap uses both the :hover,:active and :focus pseudo-classes to target specific element states:

/* Example of Bootstrap :active styles for buttons */
.btn.active, .btn:active {
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}

along with :

/* Example of Bootstrap :focus and :hover styles for buttons */
.btn.focus, .btn:focus, .btn:hover {
    color: #333;
    text-decoration: none;
}

So you'll just need to explicitly override them using your own style :

/* The more specific your selector (e.g. the more accurately it describes an  */
/* element, the more likely a style will be applied. */
.btn.buttonColor:active,
.btn.buttonColor.active,
.btn.buttonColor:hover,
.btn.buttonColor:focus {
    color: #ffff00!important;
}

or if you want to be more specific, you could explicitly target <button> elements exclusively :

button.btn.buttonColor:active,
button.btn.buttonColor.active,
button.btn.buttonColor:hover,
button.btn.buttonColor:focus {
    color: #ffff00!important;
}

There was an extra `.button` appended to the styles. I've removed it, give that a try. You can [see it using your example code here](http://jsbin.com/nuvaho/edit?html,output). — Rion Williams, Apr 27 '16 at 18:44

How do I override bootstrap?

3 Answers3