Last active
May 6, 2019 09:55
-
-
Save withArtur/eeee098ccc0ab5c65bd28fd7455539ff to your computer and use it in GitHub Desktop.
Bootstrap 4 all media query breakpoints (xs,sm,md,lg,xl) up to, down from, only and betwewn
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Bootstrap 4 all media queries #wMQ | |
| * up > sm, md, lg, xl | |
| * down < sm, md, lg | |
| * only = xs, sm, lg, xl | |
| * between <> sm-lg, sm-xl, md-xl | |
| */ | |
| /* .xs = | Extra Small devices only (portrait phones) less than 576px */ | |
| @media (max-width: 575.98px) { | |
| } | |
| /* .sm > | Small devices and up (landscape, phones) 576px and up */ | |
| @media (min-width: 576px) { | |
| } | |
| /* .sm < | Small devices and down (landscape, phones) less than 768px */ | |
| @media (max-width: 767.98px) { | |
| } | |
| /* .sm = | Small devices only (landscape, phones) upper 576px and less than 768px */ | |
| @media (min-width: 576px) and (max-width: 767.98px) { | |
| } | |
| /* .md > | Medium devices and up (tablets) 768px and up */ | |
| @media (min-width: 768px) { | |
| } | |
| /* .md < | Medium devices and down (tablets) less than 992px */ | |
| @media (max-width: 991.98px) { | |
| } | |
| /* .md = | Medium devices only (tablets) upper 768px and less than 992px */ | |
| @media (min-width: 768px) and (max-width: 991.98px) { | |
| } | |
| /* .lg > | Large devices and up (desktops) 992px and up */ | |
| @media (min-width: 992px) { | |
| } | |
| /* .lg < | Large devices and down (desktops) less than 1200px */ | |
| @media (min-width: 1199.98px) { | |
| } | |
| /* .lg = | Large devices only (desktops) upper 992px and less than 1200px */ | |
| @media (min-width: 992px) and (max-width: 1199.98px) { | |
| } | |
| /* .xl = | Large devices only (desktops, TV) 1200px and up */ | |
| @media (min-width: 1200px) { | |
| } | |
| /* Between <> .sm-lg, .sm-xl, .md-xl */ | |
| /* .sm <> .lg | From Small to Large devices only (landscape, phones, tablet, desktops) upper 576px and less than 1200px */ | |
| @media (min-width: 576px) and (max-width: 991.98px) { | |
| } | |
| /* .sm <> .xl | From Small to Extra Large devices only (landscape, phones, tablet, desktops, TV) upper 576px and less than 1200px */ | |
| @media (min-width: 576px) and (max-width: 1199.98px) { | |
| } | |
| /* .md <> .xl | From Medium to Extra Large devices only (tablet, desktops, TV) upper 768px and less than 1200px */ | |
| @media (min-width: 768px) and (max-width: 1199.98px) { | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment