All bootstrap breakpoints deprecated?

css twitter-bootstrap less
launchoverit picture launchoverit · Dec 2, 2014 · Viewed 10.1k times · Source

Looking at variables.less (and from googling around), it looks like all of bootstrap's breakpoint less variables are deprecated. Is this correct? Does anybody know what we should be using instead if we want to assign styles based on bootstrap's screen-size breakpoints? Using Bootstrap v3.1.1 with LESS. Thanks.

//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra small screen / phone
//** Deprecated `@screen-xs` as of v3.0.1
@screen-xs:                  480px;
//** Deprecated `@screen-xs-min` as of v3.2.0
@screen-xs-min:              @screen-xs;
//** Deprecated `@screen-phone` as of v3.0.1
@screen-phone:               @screen-xs-min;

// Small screen / tablet
//** Deprecated `@screen-sm` as of v3.0.1
@screen-sm:                  768px;
@screen-sm-min:              @screen-sm;
//** Deprecated `@screen-tablet` as of v3.0.1
@screen-tablet:              @screen-sm-min;

// Medium screen / desktop
//** Deprecated `@screen-md` as of v3.0.1
@screen-md:                  992px;
@screen-md-min:              @screen-md;
//** Deprecated `@screen-desktop` as of v3.0.1
@screen-desktop:             @screen-md-min;

// Large screen / wide desktop
//** Deprecated `@screen-lg` as of v3.0.1
@screen-lg:                  1200px;
@screen-lg-min:              @screen-lg;
//** Deprecated `@screen-lg-desktop` as of v3.0.1
@screen-lg-desktop:          @screen-lg-min;

Answer

cvrebert picture cvrebert · Dec 2, 2014

What @seven-phases-max said. The @screen-{sm,md,lg}-min variables are the ones you should use. The others have been deprecated in favor of these.

And @screen-xs-min is deprecated because XS has no narrowest screen size (unless you want to count 1px) since it's the smallest breakpoint. (Likewise, LG has no maximum width.)

Related questions

Correct way to create rounded corners in Twitter Bootstrap

I've just started with Twitter Bootstrap and here is one question. I am creating custom <header> block, and I want it's bottom corners to be rounded. Is there any "correct" way to do this by using predefined classes, …

Read More
Use table row coloring for cells in Bootstrap

Twitter Bootstrap offers classes to color table rows like so: <tr class="success"> I like the color choice and the class naming. Now what I would like to do, is to re-use these classes and apply them on …

Read More
Fluid Container in Bootstrap 3

How to make fluid container in bootstrap 3? In bootstrap 2.3.2 .container-fluid class is there. But now in bootstrap 3 it is missing and there is only .container class. Please help me.

Read More