Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

All bootstrap breakpoints deprecated?

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; 
like image 390
launchoverit Avatar asked Dec 02 '14 01:12

launchoverit


People also ask

How many breakpoints does bootstrap use?

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.

How do bootstrap breakpoints work?

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.


1 Answers

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

like image 55
cvrebert Avatar answered Sep 24 '22 15:09

cvrebert