How to override the default Bootstrap CSS styles

How to override the default Bootstrap CSS styles
How to override the default Bootstrap CSS styles

As the Bootstrap is gaining more popularity day-by-day, the web users are getting bored of seeing the same styles of Bootstrap over many websites. It has now become a stale mainstream experience. So how can we override the default CSS styles of Bootstrap without affecting or changing anything within the core CSS files? Well, it’s not a tough thing. Here is how you do it.

Step 1

When you add the Bootstrap core CSS files in your head section, right after that line, you will have to add another CSS file called “custom.css” (or whatsoever you would like to name it). This file will contain all the overridden CSS styles within it. It is very important to add it after the core file because the web browsers read your codes from top to bottom and left to right, similar to the way we read books. So it will first load the core file and then the custom CSS file, which means it will load the core style first and then our custom stylesheet will again override them by our customized CSS styles.

Step 2

Okay, that’s great. Now for example, if you want to modify the background color of the default Bootstrap button followed by the class ”.btn-default”, you will have to write the custom styles within your “custom.css” file. Here is an example: This is our html code –

And its output will be –

How to override the default Bootstrap CSS styles

Now we will override the default styles, we will change the background and font color of our button. Copy and paste the bellow codes into your custom.css file –

And the output will be this –

How to override the default Bootstrap CSS styles

Isn’t it cool? Using this method you can override any of the default Bootstrap style (e.g. Bootstrap Tables, Dropdown, Links, etc) as per your need. This will make your template look and feel like you want it to while being 100% compatible with Bootstrap. But remember, always try to avoid the using of “!important” declaration to override any of the style, because it may affect other Bootstrap core CSS styles. Still have any doubt or question regarding this tutorial? Feel free to ask me by using the comment box below. I would love to help you. You can download the exercise files from the bellow link.

Download Exercise Files

Comments

Nilotpal Singha

A professional graphic web designer, blogger, writer.

You may also like...