Overriding Bootstrap Classes Using CSS

Are you having a hard time changing some properties of some bootstrap classes with CSS?

I understand it must be very frustrating and tiring to change tiny details here and there. But I can help you with a few tricks to get over it.

Most web pages are styled using CSS and or other CSS frameworks. Bootstrap is the most popular of these frameworks. It consists of various classes that make developing responsive and mobile-first websites easier and faster. Bootstrap 4 is the latest version of Bootstrap.

Responsive web design involves using HTML and CSS/Bootstrap to resize a website so they look good on all devices (phones, tablets, desktops or even TV screens): Although Bootstrap 4 unlike other versions is more advance and makes styling of a web page more effortless, it is quite limited and would need more css styling to make the best out of the web page.

HOW CAN I CHANGE THE STYLING OF BOOTSTRAP CLASSES?

Initially, overriding bootstrap classes can be very frustrating. This is
common because of the preference given to these classes by the browser. Hence it all boils down to specificity. CSS specificity is the common reason
why your CSS-rules don’t apply to certain elements, especially with Bootstrap. This https://www.w3schools.com/css/css_specificity.asp will help you understand more about the specificity principle in CSS.

Based on the principle of specificity every selector possesses its numerical weight as follows;

0 point for universal selector (*), body and inherited values (zero specificity)
1 point for tag selectors and pseudo-elements (least specific)
10 points for pseudo-classes and classes (including Bootstrap classes; less specific)
100 points for #id (more specific)
1000 points for inline styling (most specific)

Hence when there are two or more selector styles the browser will always choose the one with more weight. Also, the order of your stylesheets may contribute to the preference of styles when competing styles have same weights.

5 TRICKS FOR OVERRIDING BOOTSTRAP CLASSES

1) Ensure the

<link>

to your stylesheet is directly after the Bootstrap

<link>

in the

<head>

of your HTML.

<link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/ 4.4.1/css/bootstrap.min.css" integrity="sha384Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">

2) Avoid using {!important } declaration if possible. In most cases, some developers use this declaration but this is less flexible as you may need to change some styling later.

3) You may inspect Bootstrap sources, determine how exactly the specific style in which you want to override is defined. Then you may copy that
selector and re-style.

4) In some cases from my experience, you may need to identify the particular selector used in Bootstrap and replace it with your selector.

For example, having prior used

<class="bg-primary">

as a Bootstrap class for background color you may remove it from the HTML and replace it with your

<class= "background_color">

class which you can style in your css file. This prevents having two conflicting styles for a single element.

5) One of the easiest ways to override Bootstrap classes is to add an 'id' to its direct or indirect parent element, like this:

<div id="bg_color-overrides">

this adds 100 points to the selector once prefixed to the #id and grants it more specificity.

For instance ;

/* Bootstrap class styling with specificity score => 10 + 1 + 10 = 21  */
.jumbotron_fluid h1 bg-primary {
    color: dodgerblue;
}

/* Ineffective regular CSS styling with specificity score => 1 */
h1 {
    color : red;
}

/* Effective CSS styling using id with specificity score => 100 + 1 = 101 */
#bg_color-overrides h1 {
    color: red;
}

DID YOU PICK UP A NEW TRICK?

Congratulations !!!!!!!!!!!!!!

I guess you did. With these few tricks you can override Bootstrap classes. If you need more info visit http://css-tricks.com/specifics-on-css-specificity/ this should guide on your quest.

Author :
Kossy Steve (kossyeze@gmail.com)
Full Stack Web developer