├── README.md
├── bs2.css
└── bs3.css


/README.md:
--------------------------------------------------------------------------------
  1 | Bootstrap-Media-Query-Breakpoints
  2 | =================================
  3 | 
  4 | > [Article and discussion here](http://scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-queries)
  5 | 
  6 | I **love** Twitter's Bootstrap. I find that when developing with it, either [Bootstrap 2](http://getbootstrap.com/2.3.2/) (2.3.2) or [Bootstrap 3](http://getbootstrap.com/), that I always need to apply custom styles at the different sizes. Especially when going beyond Bootstrap's standard functionality. After all, it's *just a front-end framework*.
  7 | 
  8 | Below you'll find nicely formatted Media Queries for starting with either of the Bootstrap versions. You can use this as a starting point for your projects. It's basically what I use when creating a new website or webapp. I've also provided links to Github for quick access.
  9 | 
 10 | ## Bootstrap 3 Media Query Breakpoints
 11 | 
 12 | Bootstrap 3 is a mobile-first front-end framework. I've included the correct order for the Media Queries below, but I've also included at the bottom of them the non-mobile first breakpoints in case some people aren't used to the mobile-first methodology since technically both will work.
 13 | 
 14 | ```css
 15 | /*==================================================
 16 | =            Bootstrap 3 Media Queries             =
 17 | ==================================================*/
 18 | 
 19 | 
 20 | 
 21 | 
 22 | 	/*==========  Mobile First Method  ==========*/
 23 | 
 24 | 	/* Custom, iPhone Retina */ 
 25 | 	@media only screen and (min-width : 320px) {
 26 | 		
 27 | 	}
 28 | 
 29 | 	/* Extra Small Devices, Phones */ 
 30 | 	@media only screen and (min-width : 480px) {
 31 | 
 32 | 	}
 33 | 
 34 | 	/* Small Devices, Tablets */
 35 | 	@media only screen and (min-width : 768px) {
 36 | 
 37 | 	}
 38 | 
 39 | 	/* Medium Devices, Desktops */
 40 | 	@media only screen and (min-width : 992px) {
 41 | 
 42 | 	}
 43 | 
 44 | 	/* Large Devices, Wide Screens */
 45 | 	@media only screen and (min-width : 1200px) {
 46 | 
 47 | 	}
 48 | 
 49 | 
 50 | 
 51 | 	/*==========  Non-Mobile First Method  ==========*/
 52 | 
 53 | 	/* Large Devices, Wide Screens */
 54 | 	@media only screen and (max-width : 1200px) {
 55 | 
 56 | 	}
 57 | 
 58 | 	/* Medium Devices, Desktops */
 59 | 	@media only screen and (max-width : 992px) {
 60 | 
 61 | 	}
 62 | 
 63 | 	/* Small Devices, Tablets */
 64 | 	@media only screen and (max-width : 768px) {
 65 | 
 66 | 	}
 67 | 
 68 | 	/* Extra Small Devices, Phones */ 
 69 | 	@media only screen and (max-width : 480px) {
 70 | 
 71 | 	}
 72 | 
 73 | 	/* Custom, iPhone Retina */ 
 74 | 	@media only screen and (max-width : 320px) {
 75 | 		
 76 | 	}
 77 | ```
 78 | 
 79 | ## Bootstrap 2.3.2 Media Query Breakpoints
 80 | ```css
 81 | /*=====================================================
 82 | =            Bootstrap 2.3.2 Media Queries            =
 83 | =====================================================*/
 84 | @media only screen and (max-width : 1200px) {
 85 | 
 86 | }
 87 | 
 88 | @media only screen and (max-width : 979px) {
 89 | 
 90 | }
 91 | 
 92 | @media only screen and (max-width : 767px) {
 93 | 
 94 | }
 95 | 
 96 | @media only screen and (max-width : 480px) {
 97 | 
 98 | }
 99 | 
100 | @media only screen and (max-width : 320px) {
101 | 
102 | }
103 | ```
104 | 
105 | ## Improvements
106 | 
107 | If you have improvements, corrections, or just a different way, I would love to hear it. I'll gladly update this if anyone has better or more accurate information. Either post a comment or send me a Pull Request on GitHub.


--------------------------------------------------------------------------------
/bs2.css:
--------------------------------------------------------------------------------
 1 | /*=====================================================
 2 | =            Bootstrap 2.3.2 Media Queries            =
 3 | =====================================================*/
 4 | @media only screen and (max-width : 1200px) {
 5 | 
 6 | }
 7 | 
 8 | @media only screen and (max-width : 979px) {
 9 | 
10 | }
11 | 
12 | @media only screen and (max-width : 767px) {
13 | 
14 | }
15 | 
16 | @media only screen and (max-width : 480px) {
17 | 
18 | }
19 | 
20 | @media only screen and (max-width : 320px) {
21 | 
22 | }


--------------------------------------------------------------------------------
/bs3.css:
--------------------------------------------------------------------------------
 1 | /*==================================================
 2 | =            Bootstrap 3 Media Queries             =
 3 | ==================================================*/
 4 | 
 5 | 
 6 | 
 7 | 
 8 | 	/*==========  Mobile First Method  ==========*/
 9 | 
10 | 	/* Custom, iPhone Retina */ 
11 | 	@media only screen and (min-width : 320px) {
12 | 		
13 | 	}
14 | 
15 | 	/* Extra Small Devices, Phones */ 
16 | 	@media only screen and (min-width : 480px) {
17 | 
18 | 	}
19 | 
20 | 	/* Small Devices, Tablets */
21 | 	@media only screen and (min-width : 768px) {
22 | 
23 | 	}
24 | 
25 | 	/* Medium Devices, Desktops */
26 | 	@media only screen and (min-width : 992px) {
27 | 
28 | 	}
29 | 
30 | 	/* Large Devices, Wide Screens */
31 | 	@media only screen and (min-width : 1200px) {
32 | 
33 | 	}
34 | 
35 | 
36 | 
37 | 	/*==========  Non-Mobile First Method  ==========*/
38 | 
39 | 	/* Large Devices, Wide Screens */
40 | 	@media only screen and (max-width : 1200px) {
41 | 
42 | 	}
43 | 
44 | 	/* Medium Devices, Desktops */
45 | 	@media only screen and (max-width : 992px) {
46 | 
47 | 	}
48 | 
49 | 	/* Small Devices, Tablets */
50 | 	@media only screen and (max-width : 768px) {
51 | 
52 | 	}
53 | 
54 | 	/* Extra Small Devices, Phones */ 
55 | 	@media only screen and (max-width : 480px) {
56 | 
57 | 	}
58 | 
59 | 	/* Custom, iPhone Retina */ 
60 | 	@media only screen and (max-width : 320px) {
61 | 		
62 | 	}


--------------------------------------------------------------------------------