0

My custom CSS file is not overriding the bootstrap.min.css unless I use !important tag in the class

This will change the color of my background header

.bg-grey{
    background-color:#333 !important;
}

While this won't

.bg-grey{
    background-color:#333;
}

Any idea why this is happening because I've put the external sheet right in the same directory?

j08691
  • 204,283
  • 31
  • 260
  • 272
Sholihin Iwan Setiawan
  • 29
  • 4
  • 1
    You should read up on [CSS specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity). Also, be sure to load your CSS after Bootstrap – j08691 Feb 27 '19 at 16:12
  • 2
    You have to learn about CSS specificity. There is probably a more specific selector overriding your style. – zgood Feb 27 '19 at 16:12
  • Use the browser inspector to check the object class. Maybe is not only .bg-grey, probably as suggested by others you must verify the specificity. – Germano Plebani Feb 27 '19 at 17:28

2 Answers2

1

Usually this happens because your bootstrap.min.css is being parsed after your custom file. What order are you including the css files in your head? You should be sure that your custom file is being included after your bootstrap file.

CoffeeAtMidnight
  • 21
  • 4
  • sure, my custom css is placed below the bootstrap css in the head tag. – Sholihin Iwan Setiawan Feb 27 '19 at 16:31
  • I'm just trying to troubleshoot here. If you inspect the element, is there a more specific selector that is overriding it? example: ".header .inner .bg-grey" it could be that you need to be more specific with your selector in order to override the bootstrap selector perhaps? – CoffeeAtMidnight Feb 27 '19 at 16:52
0

Using !important is considered to be acceptable for utility/helper classes, and Bootstrap's authors have chosen to use !important on all of the Bootstrap 4 Utility classes.

The background color utility classes (bg-*) use !important, so you must use !important for any custom color overrides to take precedence.

However, bg-grey isn't a color that's included in Bootstrap 4. If you're defining a custom color, make sure the overrides follow any previous CSS definition of bg-grey.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • Here's another case. So here's the initial code from the bootstrap template i downloaded it and i cann't simply change the color, unless i put the !important tag. #mainNav .navbar-nav .nav-item .nav-link { color: #fff !important; font-weight: 700; font-size: .9rem; padding: .75rem 0; } – Sholihin Iwan Setiawan Feb 27 '19 at 16:44
  • 1
    That's a different question. You should [read this answer](https://stackoverflow.com/questions/8596794/customizing-bootstrap-css-template/50410667#50410667) and **learn about CSS specificity**. – Carol Skelly Feb 27 '19 at 16:49