Matt Lambert

Check out my blog, or sign up to receive articles by email.

How to Use CSS Inheritance with Bootstrap

By admin on February 16th, 2015 in Bootstrap

Today I’m going teach you how to use simple CSS inheritance. Will grab the Bootstrap framework and create some custom styles. In this case, I’ll show you how to overwrite the default Bootstrap button colors. If you’d like to skip ahead to the final code, you can view a fiddle over at:

View the final code

Before we start doing any coding we need to talk a little bit about CSS inheritance. With CSS the last property that loads wins. This can be in the same stylesheet or across many stylesheets. Let’s take this for example:

.myButton {
  background: red;
}

.myButton {
  background: blue;
}

Which color will actually be rendered when you call the .myButton class? Since the blue property was second the button will be blue. You can also split the second class into a different stylesheet. If the the new stylesheet is loaded after the first, the blue color will still be rendered. This is exactly the setup we are going to use for overwriting the Bootstrap default button colors.

The first stylesheet will be the Bootstrap framework, so make sure you load that one first in the <head> of your page. After that, insert another CSS file and call it something like theme.css. This file is going to contain your custom styles. We never want to change the contents of the bootstrap.min.css, we always want to overwrite.

In our custom stylesheet, we’re going to enter the properties that we want to change. Keep in mind, you don’t have to copy over all the button properties from Bootstrap. You only have to include the properties you want to change. In this case that will be background-color and border-color. If you haven’t already, view the demo fiddle to see the code in action at:

View the final code

In the demo you’ll see to change the button colors you only have to overwrite those two properties. I also included a :hover version so you can see the button color change when rolled over. Of course, you can overwrite more properties if you want to make your buttons look more unique. Other properties aside, this is a simple example of how you can use CSS inheritance to harness the power of Bootstrap.

Mastering Bootstrap – The complete guide to creating Bootstrap 3 themes. Learn More →

Like what you read? Check out my store over at Creative Market to support the blog and help keep the lights on. Files starting from only $2.