5

In the docs it has media queries for "up to 480px" and "768px and up", but nothing in between those sizes.

What's up with that? Is it an error in the comments or what?

Anshad Vattapoyil
  • 23,145
  • 18
  • 84
  • 132
ChocoDeveloper
  • 14,160
  • 26
  • 79
  • 117
  • For resolution between 480-768 it will take the default CSS values which is not declared under `media` tag. Over-riding default styles are provided for other resolutions – Roy M J Sep 19 '13 at 15:29

2 Answers2

6

Unofficially there is a breakpoint between 480 and 768 called ms (then you use col-ms etc.), see this discussion.

See also my contribution with examples to see the ms hack in action.

Form without the ms hack

Form WITH ms hack

firepol
  • 1,731
  • 22
  • 39
1

Bootstrap is a "mobile-first" framework. That means that the initial core styles are intended for smartphone devices (up to 768px).

After that, various resolution breakpoints have been defined that trigger additional styles that override or complement the core styles to optimize the layout for various devices. For instance, the nav menu might be hidden by default in the mobile-optimized layout, but if the resolution reaches 768 pixels, tablet-optimized styles kick in and show the nav menu as a dropdown.

It might sounds a bit confusing, but if you want to add styles for smartphones, just add them to your stylesheet without a media query. If you want to override or complement those styles for tablets, use the @media (min-width: @screen-sm) { ... } media query. The same goes for the desktop and over-wide desktop layouts.

It should be noted you can override these resolution breakpoints if you would like.

UPDATE

From this answer: Twitter's Bootstrap 3 grid, changing breakpoint and removing padding

It looks like there is some code for a "tiny" grid system that uses the 480px breakpoint, but it doesn't appear to be implemented.

Community
  • 1
  • 1
Mister Epic
  • 16,295
  • 13
  • 76
  • 147