Bootstrap 3.0 Media queries

Question

I'm working on a small project based on Boostrap 3 (html5boilerplate custom build) and trying to use the "official" media queries in the boostrap documentation:

/* Extra small devices (phones, up to 480px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg) { ... }

For some reason the media queries doesn't seem to exist (@screen-sm, screen-md, screen-lg), I'm searching for this in the bootstrap files but can't find any references.

My example code (main.css):

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm) {

    .header-btn {display: none;}

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md) {

    .slogan {display: none;}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg) {}

Basically what happening is... nothing!

I get those errors in Chrome: http://i.solidfiles.net/0d0ce2d2a7.png

Any ideas?

Answer 1

The bootstrap documentation is a little unclear.

Using these @... parameters for min-width is in fact less syntax, not CSS.

You should use the customize utility in Bootstrap (see Media queries breakpoints) to set up what you want these screen-xxx parameters to be (e.g. set screen-sm to be 768px).

And then when click the Compile button in the bottom, the less code is compiled to CSS. this compilation will replace all occurrences of @screen-sm with 768px, and the same for the other parameters.