Type b4+ then press TAB. It expands to
@media (min-width: $screen-xs-min) { // > 480px
Bootstrap:
b4-b4+(480px)b7-b7+(768px)b9-b9+(992px)b12-b12+(1200px)
Non-bootstrap:
4-4+(480px)7-7+(768px)9-9+(992px)12-12+(1200px)
-
-
Save amed/a5ccddbbeea6da9595a95d902caf5bd7 to your computer and use it in GitHub Desktop.
Media query snippets
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 version | |
| # | |
| snippet b12- "< 1200px" | |
| @media (max-width: $screen-lg-max) { // < 1200px | |
| endsnippet | |
| snippet b12+ "> 1200px" | |
| @media (min-width: $screen-lg-min) { // > 1200px | |
| endsnippet | |
| snippet b9- "< 992px" | |
| @media (max-width: $screen-md-max) { // < 992px | |
| endsnippet | |
| snippet b9+ "> 992px" | |
| @media (min-width: $screen-md-min) { // > 992px | |
| endsnippet | |
| snippet b7- "> 768px" | |
| @media (max-width: $screen-sm-max) { // < 768px | |
| endsnippet | |
| snippet b7+ "< 768px" | |
| @media (min-width: $screen-sm-min) { // > 768px | |
| endsnippet | |
| snippet b4- "> 480px" | |
| @media (max-width: $screen-xs-max) { // < 480px | |
| endsnippet | |
| snippet b4+ "<= 480px" | |
| @media (min-width: $screen-xs-min) { // > 480px | |
| endsnippet | |
| # | |
| # Non bootstrap version | |
| # | |
| snippet 12+ "> 1200px" | |
| @media (min-width: 1201px) { | |
| endsnippet | |
| snippet 12- "< 1200px" | |
| @media (max-width: 1200px) { | |
| endsnippet | |
| snippet 9+ "> 992px" | |
| @media (min-width: 993px) { | |
| endsnippet | |
| snippet 9- "< 992px" | |
| @media (max-width: 992px) { | |
| endsnippet | |
| snippet 7+ "> 768px" | |
| @media (min-width: 769px) { | |
| endsnippet | |
| snippet 7- "< 768px" | |
| @media (max-width: 768px) { | |
| endsnippet | |
| snippet 4+ "> 480px" | |
| @media (min-width: 481px) { | |
| endsnippet | |
| snippet 4- "< 480px" | |
| @media (max-width: 480px) { | |
| endsnippet |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment