CODEWITHSUNDEEP
csswordpresstwitter-bootstrap-3
Andi Wilkinson
Andi Wilkinson

Reputation: 662

Background colour change Bootstrap

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.

Upvotes: 4

Views: 33251

Answers (4)

Darshak Malvi
Darshak Malvi

Reputation: 59

Try this

body {

  background-color: #your color code;
}

Upvotes: 3

Andi Wilkinson
Andi Wilkinson

Reputation: 662

I deleted the roots theme and bootstrap. added it again, added the couple of changes I had made previously, (enqued stylesheet)

then I changed the backkground of the body again. now it works.

i havent a clue why it didn't before, I didnt add any colours anywhere else, I had only just started modifying it. - buggy perhaps?

but my answer to this is - maybe I broke my theme inadvertently.

Upvotes: 0

Chris Pickford
Chris Pickford

Reputation: 8991

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/

Upvotes: 3

Gerald Schneider
Gerald Schneider

Reputation: 17797

With every modern browser you can check easily where the active style comes from.

Here is an example using the Chrome developer tools:

Chrome Developer Tools on stackoverflow

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.

Upvotes: 3

Related Questions