How to override Bootstrap CSS

There are two main ways you can override Bootstrap CSS:

• Override using a higher specificity selector and properties via CSS
• Using Bootstrap Sass variables (recommended)

We recommend using Sass variables because that will not override the regular CSS from Bootstrap, but in fact, change it altogether. However, I will still show you how you can override the Bootstrap CSS in a fast and easy way.

Overriding Bootstrap via CSS

The most straightforward way of overriding Bootstrap styles is using plain old CSS. In this case, you will need to include your own CSS file after having Bootstrap included. Here’s an example:

<!-- Bootstrap CSS --!>
<link rel="stylesheet" href="bootstrap.min.css">

<!-- CSS where you override --!>
<link rel=”stylesheet” href=”custom.css”>

After that, you can override the Bootstrap default styles in the custom.css file. For example, this is how you can change the color of the primary button:

/* bootstrap.min.css */
.btn-primary {
    background-color: #FC7F66;
    border-color: #FC7F66;
}

In this case, the specificity is the same as for the default Bootstrap styles, but it is being overridden because it is written after the initial styles.

Some Bootstrap selectors may have a higher specificity so you will have to write selectors that match that specificity or have a higher one. Here’s an example:

/* bootstrap.min.css */
.navbar-light .navbar-brand {
    color: rgba(0,0,0,.9);
}

This is the default style for the branding element inside the navigation bar. If you want to override this you would need to write with the exact same specificity or a higher one:

/* custom.css */
.navbar-light .navbar-brand {
    color: #FC7F66;
}

Customizing Bootstrap via Sass variables and mixins

By far this is the best way to customize Bootstrap for your project because instead of overriding the styles it actually changes them saving you time and duplication of style declarations.

The one downside is that you need to set up a local environment that can compile Sass files. The good news is that there are many ways to do this. Some time ago, we wrote a tutorial on how you can set up a simple Gulp 4, Bootstrap Sass, and BrowserSync working environment. You can also just directly download the files to get started and resume this tutorial.

If you followed the tutorial for setting up Bootstrap Sass, Gulp 4, and BrowserSync you will have a _variables.scss file where you can easily change styles such as colors, sizing, shadows that will propagate throughout your whole Bootstrap application.

This means that if you change the $primary variable to your preferred color, all of the primary classes from Bootstrap will take on the new $primary color, including the buttons, badges, navigation items, and so on.

This is one of the reasons that using variables is much easier once you get used to them because you won’t have to override each class one by one using classic CSS.

Bootstrap themes and templates

You can save a lot of time and benefit from professionally designed templates by downloading or purchasing some of our free and premium Bootstrap templates, themes, and UI kits from Themesberg.

Each theme uses the recommended Gulp, Bootstrap Sass, and BrowserSync stack environment. Our newest themes that use Bootstrap 5 also no longer require jQuery as a dependency, rendering your website faster and easier to work with.