The Variables

Quick introduction, Bootstrap Sass is pretty easy to use, and highly recommended as unneeded UI can be commented out in the _boostrap.scss

I’ve compiled a list for quick reference of common vars and media queries. These are located in bootstrap/_variables.scss, these can be changed at roughly line 287. Each root variable $screen-XX defines both the min and max variables, the root vars are depreciated adn media queries should be written with the -min and -max.

$screen-xs = 480px

$screen-sm = 768px

$screen-md = 992px

$screen-lg = 1200px

Depreciated

Note: These can be used instead of screen-xx-min but shouldn’t be.

$screen-phone = 480px

$screen-tablet = 768px

$screen-desktop = 992px

$screen-lg-desktop = 1200px

Minimum Media Queries

@media (min-width: $screen-xs-min) { } //480px & greater

@media (min-width: $screen-sm-min) { } //768px & greater

@media (min-width: $screen-md-min) { } //992px & greater

@media (min-width: $screen-lg-min) { } //1200px & greater

Minimum - Maximum Media Queries

@media (min-width: $screen-xs-min) and (max-width: $screen-xs-min) { } //480px - 767px

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

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

Maxium Media Queries

Note: It’s highly recommended to use min-width media queries when possible.

@media (max-width: $screen-xs-max) { } //479px & lower

@media (max-width: $screen-sm-max) { } //767px & lower

@media (max-width: $screen-md-max) { } //991px & lower

@media (max-width: $screen-lg-max) { } //1199px & lower