Bootstrap’s missing 480px to 640px column

I forked this @twbootstrap col-ms-* gist and made it better. Now with visibility-ms-* and hidden-ms helpers. Link to Gist

This is a hack to fill the gap between 480 and 760 pixels – a missing range in the bootstrap responsive grid structure. Use these classes to style pages on cellphones when they transition from portrait to landscape.

By default, the smallest column (col-xs-) spans from 480px to 768px, neglecting the ever-useful 640px screen size. This snippet aims to solve that by limiting col-xs- to the 480px to 640px range (as far as the responsive utilities are concerned) and adding col-ms-* that covers the range between 640px and 768px.

This initiative was originally started by @andyl in response to this thread, but I found it lacked the responsive utilities, container widths and other such conveniences that it generally raised more questions in me than it solved. Plus it didn’t actually work all that well in my test cases. I’m hoping what I’ve done here fixes that.

 

Adam Merrifield

 

Leave a Reply