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;
launchoverit
  • 4,807
  • 4
  • 20
  • 23

1 Answers1

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

cvrebert
  • 9,075
  • 2
  • 38
  • 49
  • 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. – launchoverit Dec 02 '14 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 02 '14 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. – launchoverit Dec 02 '14 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 03 '14 at 09: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. – Chris Moschini Sep 11 '15 at 13:59
  • In order to get a non-deprecated less filesystem, I personnaly removed the deprecated variables. Therefore, the non deprecated have not to depend on the deprecated one : `@screen-sm-min: 768px;` `@screen-md-min: 992px;` `@screen-lg-min: 1200px;` – Nicolas Thery Dec 13 '16 at 12:57