totally rookie question I know, but I am trying to change the background colour in bootstrap
i change using
body{background:#fff;}
which works, i can see the change at the bottom of the page, but the whole page and it's entire width is still white
within my page all I then have is
<div class="container">
<div class="row">
i have changed the body of container and row respectively but its not those. also tried changing the colour of .wrap as inpection shows its contained in that too, but nothing changes the full background and Im a little stumped as to what is blocking it. - Ive not written any actual code yet, its just the standard install and a roots theme.
anyone know what is going on here? i know it will be something stupid.
Code is here
<div class="wrap" role="document">
<div class="content row">
<div class="main col-sm-12" role="main">
<div class="page-header">...</div>
<section class="container">
<div class="row">
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
</div><!-- end row -->
</section>
</div><!-- /.main -->
</div><!-- /.content -->
none of these have any background colours applied to them.
You should look into using LESS - if you haven't come across it before it essentially allows you to use variables in CSS. It's very handy.
Anyway, you could always use the customisation options when downloading bootstrap to configure the background colour.
Have a look here: http://getbootstrap.com/customize/
With every modern browser you can check easily where the active style comes from.
Here is an example using the Chrome developer tools:
Select the tag you want to investigate, open the computed style and expand the property you need. You'll see every instance where the property is affected and which are overriden by something else.
IE and Firefox have similar tools.
Also, keep in mind that the order of used Stylesheet matters.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With