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

@adonbajrami: I think you need to add @import "myStyle.less" in the bottom of the bootstrap.less file.

The file bootstrap.less imports variables.less. Including your file in the same parent file will give your file myStyle.less access to the variables declared in variables.less.

(Sorry for not commenting in place, but I'm not yet able to.)

Answer 2

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.