How can I override Bootstrap CSS styles?

Question

I need to modify bootstrap.css to fit my website. I feel it\'s better to create a separate custom.css file instead of modifying bootstrap.css

Answer 1

In the head section of your html place your custom.css below bootstrap.css.

Then in custom.css you have to use the exact same selector for the element you want to override. In the case of legend it just stays legend in your custom.css because bootstrap hasn't got any selectors more specific.

legend {
  display: inline;
  width: auto;
  padding: 0;
  margin: 0;
  font-size: medium;
  line-height: normal;
  color: #000000;
  border: 0;
  border-bottom: none;
}

But in case of h1 for example you have to take care of the more specific selectors like .jumbotron h1 because

h1 {
  line-height: 2;
  color: #f00;
}

will not override

.jumbotron h1,
.jumbotron .h1 {
  line-height: 1;
  color: inherit;
}

Here is a helpfull explantion of specificity of css selectors which you need to understand to know exactly which style rules will apply to an element. http://css-tricks.com/specifics-on-css-specificity/

Everything else is just a matter of copy/paste and edit styles.