Set bootstrap background

Question

http://getbootstrap.com/css/#overview-type-links

And I have seen the solutions here - such as this:

html, body {
            width: 100%;
            height: 600px;
            background:red !important;
        }

This isn't working - I need the background for a single page in the application to be all red - I don't want it applied universally - so I need to override the bootstrap.min.css for one page - therefore I cannot specify this color when creating the bootstrap.min.css using there online generator.

Help?

Why wouldn't you then put the CSS in that single page.. either in another file or tag? — Carol Skelly, Mar 10 '16 at 18:31
I am but it's not working? The background stays white no matter how I do it - I assumed BS was forcing the background white using !important? — Alex.Barylski, Mar 10 '16 at 18:33
You can write a custom script `$(document).ready(function(){document.body.style.backgroundColor = "red" });` on that specific page to change the color of background. — vendettamit, Mar 10 '16 at 18:34
That feels hackish - I am trying to keep JS to a minimal - why is this not possible with CSS? — Alex.Barylski, Mar 10 '16 at 18:34
Checkout this answer. You would get insights of css Specificity http://stackoverflow.com/a/20542297/881798 — vendettamit, Mar 10 '16 at 18:41
body { background : red;} It's working for me. May be it cause by something else. Can you share link, where it's not working ? — Madan Bhandari, Mar 10 '16 at 18:50
Bloody hell - sorry guys it was a caching issue or something with chrome - when I closed the browser and re-opened the file it changed as expected - my bad very sorry. — Alex.Barylski, Mar 10 '16 at 18:53

abhi · Answer 1 · 2016-03-10T18:42:12.683

You can go to the .html file for the particular page you want in all red, and modify the background color within the .html file itself by adding a style="background-color:#FFFFFF" to the <body> tag. You can change #FFFFFF to the shade of red as you wish.

For example say we have the code for index.html below:

<html>
   <head>
      <!-- some code here -->
   </head>

   <body, style="background-color:#FFFFFF">
   </body>
</html>

If that does not work, bootstrap typically has wrappers within each main body tag to represent something or the other. Take a look at the following example:

<html>
   <head>
      <!-- some code here -->
   </head>

   <body>
      <div id="wrapper">
         <!-- some more code here -->
      </div>
   </body>
</html>

You can also change it to:

   <body>
      <div id="wrapper", style="background-color:#FFFFFF">
         <!-- some more code here -->
      </div>
   </body>
</html>

You can also use this technique to override any of the Bootstrap CSS files temporarily for a particular page or particular component of the page and it will NOT be applied universally.

Testing it out on my end with a Bootstrap application sample and it works well. How about posting the style in a div? Usually there should be something like
and then you can change it to — abhi, Mar 10 '16 at 18:39

score 0 · Answer 2 · answered Mar 10 '16 at 19:44

Is it important do to it using online HTML and CSS? If I were you, I would have used JavaScript to determine if its the specific page and then assign the background color.

 <script>
  var location =  window.location.href;
if(location =="file:///C:/Users/Fahad/Desktop/index.html")
{
    document.body.style.backgroundColor = "red";
}
  </script>

You will have to change the url to the link of the specific page where you want to change the color.

Set bootstrap background

2 Answers2