Overwrite Bootstrap with CSS code

We all know that Bootstrap makes lives easier. But, there are sometimes where we need to overwrite with custom CSS. To overcome that problem there is a simple and basic trick. In this blog, I am going to share this trick with you.

HTML, the language which follows the order of code perfectly. We can take advantage of this very effectively. If you find that your custom styles are not working, make sure that you change the order of link tags in the header.

CSS styles are applied in the order they are linked in your HTML code.

So, if you have two stylesheets say styles1.css and styles2.css which both target the same element.

styles1.css

body {
background-color: red;
}

styles2.css

body {
background-color: blue;
}

If inside the head section of your HTML code, you list your links as this

<link rel="stylesheet" href="styles1.css">
<link rel="stylesheet" href="styles2.css">

Then, the resulting page will be in Blue color.

But if you listed your links like this:

<link rel="stylesheet" href="styles2.css">
<link rel="stylesheet" href="styles1.css">

The resulting page will be in Red.

Essentially both styles are being applied, but the one that's visible at the end is the one applied last.

So, following that logic, if your custom styles are not overriding the bootstrap styles, all you need to do is move the link to your custom stylesheet to a line after the bootstrap CDN link

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">

This means that you first load the default bootstrap styles, then you can overwrite some of those components with your own custom CSS.

Just remember one thing HTML follows the order of code.

That's a wrap friends. Hope this small blog helps you through your web development coding journey. Follow me on Twitter for some awesome content.