CodeNewbie Community

loading...

Overwrite Bootstrap with CSS code

Vishnubhotla Bharadwaj
Tech that matters
Originally published at bharadwaj.hashnode.dev on ・2 min read

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;
}

Enter fullscreen mode Exit fullscreen mode

styles2.css

body {
background-color: blue;
}

Enter fullscreen mode Exit fullscreen mode

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">

Enter fullscreen mode Exit fullscreen mode

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">

Enter fullscreen mode Exit fullscreen mode

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">

Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)