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;
Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for building responsively. These breakpoints can be customized if you're using our source Sass files. Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 12.
Grid sizes (A.K.A — Breakpoints)Bootstrap uses CSS media queries to create responsive breakpoints that establish a boundary for each grid size. These grid sizes enable you to change the layout of columns to best match different screen widths and devices__ the essence of responsive design.
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.)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With