is possible to change background color using boots

Question

I'm using bootstrap, and currently full page is white background as default. I was wondering if that possible to change background color to gray when using mobile under bootstrap! like "class="col-sm-6" col-xs-6"...

does is possible how to write that code in jquery to automatic to change background color to gray color when come to use mobile and if using desktop change stay background color to white as default.

Answer 1

Using jQuery:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    // If they are using mobile device
    $("col-sm-6").css("background-color", "Grey");
} else {
    // If they are on a deskop
    $("col-sm-6").css("background-color", "White");
}

Answer 2

This is definitely possible, but doesn't require you to use jQuery at all. In a CSS file, simply add a background attribute to those classes - it might look something like the following:

.col-xs-1, .col-xs-2, .col-xs-3,
.col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9,
.col-xs-10, .col-xs-11, .col-xs-12 {
    background: #999;
}

.col-sm-1, .col-sm-2, .col-sm-3,
.col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9,
.col-sm-10, .col-sm-11, .col-sm-12 {
    background: #fff;
}

Alternatively, you could use media queries to change the body background at certain sizes. For example, to make the body gray only when the screen in small, you could use:

body {
    background: #fff;
}

@media all and (max-width: 768px) {
    body {
        background: #999;
    }
}