How to overwrite default Bootstrap with custom CSS

How to overwrite default Bootstrap with custom CSS

 

Bootstrap has now become one of the finest, cleanest and most popular frontend development frameworks. The reason is very simple – the clean coding techniques, the grid system and also extensive support for mobile first design.

So, a very common question among amateur coders is how do we overwrite default bootstrap code? Bootstrap comes with a default set of CSS snippets that are by default integrated whenever you extend the file “bootstrap.css” or “bootstrap.min.css”.

So how do we overwrite default bootstrap? Let us see. It’s a very simple change. You’ll catch it instantly.

Change or overwrite default bootstrap using Bootstrap’s own services

If your change required is minimal and kind of a theme based, you can try Bootstrap’s very own customize option. They actually let you select a whole range of changes in order to overwrite the basic settings of bootstrap.

So, the very first thing is that you get to choose which components you want to compile as part of your Bootstrap modules. This is interesting, because you can actually reduce components of your CSS and JavaScript files and make them smaller. This in turn helps you reduce your webpage sizes and build a smoother and lightweight website.

Once you have selected what all you want to be considered, you get to customize every single component and CSS definition of Bootstrap.

By this, I obviously mean that you can customize the typography, color, border, margin, padding, line-height, font-size, headers, icons, etc.

how-to-overwrite-default-Bootstrap-with-custom-CSS

In addition to the above, you can overwrite default Bootstrap in a wide range of custom components like navs, navbars, tooltips, buttons, tables, modals, popovers, etc. You can change the individual text settings, color settings and box settings (margin, borders and padding) for all of these items.

Bootstrap also offers some standard color schemes for buttons, headers and other components. They are called brand-primary, brand-success, brand-info, brand-danger and brand-warning. These are specific brand related color settings that is supposed to define your brand value all over the website. This is also editable in the Bootstrap customize page. These are CSS classes that can be attached to buttons, infobars, headers, etc. to denote your theme color or brand color.

Still want to overwrite default Bootstrap further more?

Apart from all that is mentioned above, you have another way to overwrite custom Bootstrap and have something of your own.

This is something that I do quite often. Even if Bootstrap provides the base artwork and structure to the website, there might occur times when their provided classes and CSS are not doing enough for your own designs.

So, it is not always that you want to overwrite custom Bootstrap, it might be that you need to add something more to it. In that case, what I do is simply create my own CSS file and merge with the existing Bootstrap files.

In case you are using Bootstrap, you have to make sure you do the following if you want to overwrite default Bootstrap settings or add you custom CSS along with Bootstrap –

  1. If you are using WordPress, then it becomes easy. WordPress considers only one CSS file to be imported (by default). So, what you do is just use a small script to import the Bootstrap file at the very beginning of the style.css file and then continue writing your own CSS after that. So, it first imports the Bootstrap styles and then overwrites it with whatever you’ve mentioned below.
  2. If you are building a website using custom coding or some other framework, just try to pack up all you style definitions under one file and follow the above procedure.
  3. One thing you need to remember is that the call to Bootstrap CSS definitions must be first and then your style definitions must follow. Otherwise you won’t be able to overwrite default Bootstrap because Bootstrap style definitions will come later to what you have written in your custom code.
  4. Another thing is, sometimes you might see that some style properties are not getting overwritten even though you have done everything right. This happens because there is a clash between the style properties mentioned in the Bootstrap file and the ones that you have written to overwrite default Bootstrap.

In this case, simply add a “!important” at the end of you property definition. See below for example.

So the script for importing Bootstrap in your custom style file is –

@import url(“bootstrap.min.css”); // write this at the beginning of your CSS file

And for forcing an overwrite default Bootstrap when your overwrite is not working –

color : #ffffff !important;
padding : 0.25em !important;

That should do. You will now be able to overwrite default Bootstrap files and definitions easily. If you have any issues, just write to me in the comments section.

Comments are closed.