CODEWITHSUNDEEP
csstwitter-bootstrap
Cody
Cody

Reputation: 11

Very basic bootstrap not working

I'm learning bootstrap and I have this very simple styling that isn't displaying. I'm going by bootstrap's website for documentation and this should work?

@media (min-width:@screen-sm-min) {
    body {
        background-color:red;
    }
}

@media (min-width:@screen-md-min) {
    body {
        background-color:blue;
    }
}

@media (min-width:@screen-lg-min) {
    body {
        background-color:green;
    }
}

Upvotes: 0

Views: 64

Answers (2)

Ty T.
Ty T.

Reputation: 586

Remember when you are using bootstrap the structure is based on a 12 column grid. You have 4 basic media queries that trigger based on the view port.

@media (max-width: 767px) so anything between 0px and 767px will use this set of styles.

@media (min-width: 768px) so anything between 768px and 991px will use this set of styles.

@media (min-width: 992px) so anything between 992px and 1199px will use this set of styles.

@media (min-width: 1200px) so anything 1200px or larger will use this set of styles.

Columns are written this way. 

<div class="col-lg-12"></div> the number can be anything from 1-12 based on the number of columns you wish to use.

You have 3 column sizes which are as follows:

col-lg- (1-12) col-md- (1-12) col-sm- (1-12) col-xs- (1-12)

Whenever you would like your columns to respond based on the view port you use a combination of sizes.

I hope this helps you out.

Upvotes: 0

DavidG
DavidG

Reputation: 119186

Unless you are compiling your CSS with a LESS compiler then using variables like that will not work. Instead use the actual values, in this case the defaults from Bootstrap would make your CSS look like this:

@media (min-width:768px) {
    body {
        background-color:red;
    }
}

@media (min-width:992px) {
    body {
        background-color:blue;
    }
}

@media (min-width:1200px) {
    body {
        background-color:green;
    }
}

Upvotes: 2

Related Questions