Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 486
Andi Wilkinson Avatar asked Jan 12 '23 03:01

Andi Wilkinson


2 Answers

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/

like image 200
Chris Pickford Avatar answered Jan 18 '23 02:01

Chris Pickford


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.

like image 37
Gerald Schneider Avatar answered Jan 18 '23 01:01

Gerald Schneider