50

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;
1
  • 10
    No, not all... Actually all those @screen-*-min except xs are not deprecated and are to be used. Dec 2, 2014 at 4:19

1 Answer 1

44

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.)

6
  • 1
    I see, thanks. So just to confirm, these are the three that aren't deprecated: '@screen-sm-min' '@screen-md-min' '@screen-lg-min' But the rest (including both '@screen-xs-min' and '@screen-xs') are? Just want to be clear because, while your point about the '@screen-xs-min' makes total sense, not having '@screen-xs' will be kind of a bummer. Dec 2, 2014 at 17:40
  • As the comment in the code says, @screen-xs is deprecated. The non-min variables are just deprecated aliases for the "-min" variables. You might also be interested in the non-deprecated computed "-max" variables.
    – cvrebert
    Dec 2, 2014 at 17:54
  • 7
    Not to belabor the point, but part of what's confusing is that the "-min" variables appear to be aliases of the non-min variables, not the other way around (e.g. @screen-md-min:@screen-md). Which seems odd since the non-min variables are the ones being deprecated. At any rate, it seems clear that moving forward I’ll be setting explicit values for the "-min" variables so they don't depend on the deprecated variables. Thanks. Dec 2, 2014 at 18:39
  • 5
    It has to be that way around to preserve backward compatibility for folks who started overriding the now-deprecated variables before the "-min" variables even existed.
    – cvrebert
    Dec 3, 2014 at 9:49
  • 1
    It needn't be that way in new products - it's just old cruft creating confusion. I question deprecating screen-xs-min - though there's no explicit min size many of the Bootstrap elements will break below 280 or 320px. And most browsers won't let you scale below this anyway. Sep 11, 2015 at 13:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.