post: Bootstrap Breakpoints: Standard and Custom

Home

Bootstrap Breakpoints: Standard and Custom

Working With Bootstrap

  

Articles

Bootstrap CSS CSS3 Framework

Bootstrap is a popular HTML, CSS, and Javascript framework for developing responsive, mobile first projects on the web. It uses a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases

It includes predefined classes for easy layout options and media break-points for mobile responsiveness. This is a quick reference guide to the media queries used to create the key breakpoints in the bootstrap grid system.

Bootstrap defaults

Widths below 768px ( @screen-xs-max ) and above 1200px ( @screen-lg-max ) are defaults below and above which currently there are no other media break-points.

Minimum Width:

In Less format this is:


/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Which in bootstrap.css translates to:


/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

Maximum Width:

In Less format this is:


/* Small devices (tablets, up to 768px) */
@media (max-width: @screen-xs-max) { ... }

/* Medium devices (desktops, up to  992px) */
@media (max-width: @screen-sm-max) { ... }

/* Large devices (large desktops, up to 1200px) */
@media (max-width: @screen-md-max) { ... }

Which in bootstrap.css translates to:


/* Small devices (tablets, up to 768px) */
@media (max-width: 767px) { ... }

/* Medium devices (desktops, up to 992px) */
@media (max-width: 991px) { ... }

/* Large devices (large desktops, up to 1200px) */
@media (max-width: 1199px) { ... }

Minimum and Maximum

It is possible to create break-points which are restricted to a range of sizes:


/* min-width 768px and max-width 991px */
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

/* min-width 992px and max-width 1199px */
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }

As CSS:


/* min-width 768px and max-width 991px */
@media (min-width: 768px) and (max-width: 991px) { ... }
/* min-width 992px and max-width 1199px */
@media (min-width: 992px) and (max-width: 1200px) { ... }

Orientation

Media break-points can also be restricted to form factor: portrait and landscape, particularly related to smartphones, tablets and larger tablets e.g surface.


/* max-width 767px and landscape only */
@media (max-width: @screen-xs-max) and (orientation: landscape) { ... }

/* min-width 768px and max-width: 991ps and landscape only */
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-maxx) and (orientation: landscape) { ... }

/* min-width 992px and landscape only */
@media (min-width: @screen-md-min) and (orientation: landscape) { ... }

/* min-width 992px and portrait only */
@media (min-width: @screen-md-min) and (orientation: portrait) { ... }

/* min-width 1200px and portrait only */
@media (min-width: @screen-lg-max) and (orientation: portrait) { ... }

Media Obscura

As mentioned above, below 768px and above 1200px there are no official break-points. It is possible however to create custom ones based on current break-point standards of 480px ( old smartphone ), 640px ( small smartphone ), and 1600px ( ultra wide monitor / hdtv ). For example:


@media (max-width: 479px) { ... }
@media (max-width: 479px) and (orientation: landscape) { ... }

@media (min-width: 480px) { ... } 
@media (min-width: 480px) and (max-width: 640px) { ... }

@media (min-width: 640px) and (max-width: 767px) { .. }
@media (min-width: 640px) and (max-width: 767px) and (orientation: landscape) { 

@media (min-width: 1600px) { ... }

Bootstrap 4 is due out soon. There is supposed to be an additional break-point for ultra-large screens, though at this point it is unclear what the final version will include.

comments powered by Disqus