How To Override Default Bootstrap CSS Styles

How To Override Default Bootstrap CSS Styles

Do you know that 18% percent of websites used the Bootstrap framework in 2018? A very steep jump considering only 1.6 percent of websites used bootstrap in 2013. The above-statements clearly indicates that the popularity of Bootstrap has considerably increased over the last few years.

Several web designers have started to customize or override default Bootstrap CSS styles. This is because the default Bootstrap style has become quite common. So, if you wish to make your website unique, it is best to experiment with the CSS styles without making any adjustments to the core CSS files. This may sound complicated in the beginning, but you can easily achieve it by simply overriding the default Bootstrap CSS styles.

  • Add the core CSS files of Bootstrap in the head section as you would do normally.
  •  Create another CSS file and name it “custom.css”.
  • Add the newly created “custom.css” file and add it to the head section in the next line under the core Bootstrap CSS files.
  • Add custom styling to custom.css file. 

Code 1 (to be placed in head tag):

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/custom. css" rel="stylesheet">

Note

It is crucial to add the “custom.css” under the core CSS files of Bootstrap. Internet browsers usually read codes from top to bottom and left to right. This is to ensure that the browsers will load the core CSS Bootstrap files first followed by the “custom.css” files with the overridden CSS styles. As a result, the core style will initially appear, but it will soon be replaced by the customized CSS styles.

How To Change The Background Color Of Bootstrap Button

Let’s say that now you wish to change the default background color (blue) of a Bootstrap button. Here’s how you can do it.

This is a normal HTML code to create a.

 <button class="btn " type="button"> Download </button>

You can easily override the default Bootstrap styles by adding the following code into your custom.css file.

.btn-style {
color: white;
background-color : blue;
}
Then, your HTML code will look like this:
<button class="btn btn-style" type="button"> Download </button>

 Now, the font color of the button will be white while its background color will be blue.

Conclusion

Most designers spend a considerable amount of their time to make their template look different and unique from others. This simple but efficient method can help you do so along with staying fully compatible with the Bootstrap framework.

It is best to avoid the use of “!important” declaration when you are overriding default Bootstrap styles. This way you can guarantee that the Bootstrap core CSS styles are not modified or changed in any way.