<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>SASS variables for responsive breakpoints</h2> <p><strong>Min-width</strong></p> <ul> <li>mnx = min-width:420px</li> <li>mns = min-width:768px</li> <li>mnm = min-width:992px</li> <li>mnx = min-width:1200px</li> </ul> <p><strong>Max-width</strong></p> <ul> <li>mxx = max-width:419px</li> <li>mxs = max-width:767px</li> <li>mxm = max-width:991px</li> <li>mxl = max-width:1199px</li> </ul> <p><strong>Example:</strong></p> <pre> @media #{$mns} { .class { background:white; } } </pre> </div> </div>

/* Bootstrap Grid Breakpoints ==========================*/ $mnx: "only screen and (min-width:420px)"; $mns: "only screen and (min-width:768px)"; $mnm: "only screen and (min-width:992px)"; $mnl: "only screen and (min-width:1200px)"; $mxx: "only screen and (max-width:419px)"; $mxs: "only screen and (max-width:767px)"; $mxm: "only screen and (max-width:991px)"; $mxl: "only screen and (max-width:1199px)"; /* SCSS Usage Example */ @media #{$mns} { .class { background:white; } }