0

I am trying to add a nice background color to a website page. This should be straightforward using background-color in my CSS file, but it won't show. So far, I have played around with my HTML code and found out that when I remove a link to a bootstrap 4 CSS file in my header, it displays perfectly. However, I need to keep bootstrap 4, so I tried other fixes:

body {
height:100%;
padding:0%;
margin-top: 50px;
background-image: none;
background-color:#B59DA4;}

The background-image: none, height:100%, or the padding:0% weren't effective compared to removing the bootstrap 4 link:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Any guidance at all would be greatly appreciated solving this issue without removing bootstrap 4.

Tech320
  • 39
  • 5
  • 1
    Is your CSS style before Bootstrap include? If so, add the link tag that reference your CSS style after the Bootstrap one. It is a best practice add the link tag that reference your styles last so it overrides any other existing styles that have the same specificity, – David Fontes Jul 30 '20 at 21:34

1 Answers1

1

By default, Bootstrap uses a white background. You will need to use the !important flag to override it.

body {
height:100%;
padding:0%;
margin-top: 50px;
background-image: none;
background-color:#B59DA4 !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>hi</body>
aprouja1
  • 1,800
  • 8
  • 17
  • While you are correct about Bootstrap having a white background in the body, I would prefer a different solution. Adding a class to the body and add the style that class, would be a much better solution. What the OP needs is just to have a higher specificity than Bootstrap selector. The `!important` keyword should be used very carefully and only on last resort IMHO. – David Fontes Jul 30 '20 at 21:35
  • But why would adding a class be "much better"? I would say that using `!important` to override 3rd-party CSS is a perfectly valid reason. – aprouja1 Jul 30 '20 at 21:41
  • It is a valid reason but it is overkill and can be hard to deal with later on. Check out this [SO answer](https://stackoverflow.com/a/3706876/11755228). This is a subjective matter but overall, I think that there is a consensus regarding the `!important` keyword, which is, don't use it, unless you really really have to! – David Fontes Jul 30 '20 at 21:52
  • @DavidFontes did you not read that answer: `Overriding 3rd party code & inline styles.` – aprouja1 Jul 30 '20 at 21:55
  • Also, I do want to point out, that Bootstrap does indeed use the `!important` keyword, so sometimes, you have no other option than use it yourself to override their styles, but this is not the case here, that's why I wanted to give a different insight. – David Fontes Jul 30 '20 at 21:55
  • I did, and what the autor of that answer say right after is: *"Generally I'd say this is a case of code smell, but sometimes you just have no option."*, which suggest that you should avoid it. Also in the conclusion, here what he says: *"Using the !important declaration is often considered bad practice because it has side effects that mess with one of CSS's core mechanisms: specificity."* – David Fontes Jul 30 '20 at 21:57
  • I would like to try the !important idea as a last resort seeing how it could potentially lead to problems in the future. I see @DavidFontes you suggested creating a class for the body. I wasn't exactly sure if there was anything else specifically you recommend, but I tried, and I still have the same issue so not sure if this is what you meant: ``; `#cl{ background-color:#B59DA4; }` – Tech320 Jul 30 '20 at 22:21
  • @EmilyRobinson To select a class, you need to use a dot instead of the hash. So use `.cl{background-color: #B59DA4}` instead. Did you try what I suggested on the comment to your question? – David Fontes Jul 30 '20 at 22:26
  • 1
    @DavidFontes That was a silly mistake on my part. It now works! Thank you! – Tech320 Jul 30 '20 at 22:28