Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Variables for responsive design in bootstrap with sass
@mixin breakpoint($point)
@if $point == lg
@media (min-width: 1200px)
@else if $point == md
@media (min-width: 992px) and (max-width: 1199px)
@else if $point == sm
@media (min-width: 768px) and (max-width: 991px)
@else if $point == xs
@media (max-width: 767px) and (min-width: 641px)
@else if $point == xxs
@media (max-width: 640px) and (min-width: 481px)
@else if $point == xxxs
@media (max-width: 480px)
// @include breakpoint(sm)
// width: 60%
@mixin breakpoint($point){
@if ($point == lg){
@media (min-width: 1200px){ @content }
@else if ($point == md){
@media (min-width: 992px) and (max-width: 1199px){ @content }
@else if ($point == sm){
@media (min-width: 768px) and (max-width: 991px){ @content }
@else if ($point == xs){
@media (max-width: 767px) and (min-width: 641px){ @content }
@else if ($point == xxs){
@media (max-width: 640px) and (min-width: 481px){ @content }
@else if ($point == xxxs){
@media (max-width: 480px){ @content }
//.class {
// @include breakpoint(sm){
// width: 60%;
// }
Copy link

MhtArs commented May 15, 2016

Thank you!

Copy link

fadlystwn commented May 27, 2016

Thanks bro! it's very helpful ! thanks a lot !

Copy link

bezelga commented Jun 29, 2016


Copy link

brandonpowell commented Aug 25, 2016

Thank you! Love it

Copy link

977developer commented Dec 29, 2017

Great Job. Thank you very much.

Copy link

sirgalleto commented Jul 3, 2018


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment