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

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

Copy link

bezelga commented Jun 29, 2016


Copy link

Thank you! Love it

Copy link

Great Job. Thank you very much.

Copy link


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