Skip to content

Instantly share code, notes, and snippets.

@johannlilly
Last active December 9, 2016 03:47
Show Gist options
  • Save johannlilly/ffe0f5b8e43617ffacf8d50e20180618 to your computer and use it in GitHub Desktop.
Save johannlilly/ffe0f5b8e43617ffacf8d50e20180618 to your computer and use it in GitHub Desktop.
Bootstrap 3 Grid System Breakpoints CSS Media Query Template
/* Bootstrap 3 Grid System Breakpoints CSS Media Query Template
* v. 1.00.00
* Note: breakpoints according to bootstrap gridlines and common phone screen CSS pixels according to Google's Chrome inspector
* Arranged to create a hierarchical priority towards more specific queries
* Licensed under the MIT/X11 License (http://opensource.org/licenses/MIT) */
@media screen and (max-width:1199px){}
@media screen and (max-width:991px){}
/* xs */
@media screen and (max-width:767px){}
@media screen and (max-width:320px){}
@media screen and (min-width:321px) and (max-width:374px){}
@media screen and (min-width:375px) and (max-width:413px){}
@media screen and (min-width:414px) and (max-width:479px){}
@media screen and (min-width:480px) and (max-width:599px){}
@media screen and (min-width:600px) and (max-width:767px){}
/* sm */
@media screen and (min-width:768px) and (max-width:991px){}
/* md */
@media screen and (min-width:992px) and (max-width:1199px){}
@media screen and (min-width:992px) and (max-width:1024px){}
@media screen and (min-width:1025px) and (max-width:1199px){}
/* lg */
@media screen and (min-width:1200px){}
@media screen and (min-width:992px){}
@media screen and (min-width:768px){}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment