Bootstrap 3 add size between xs 480 and sm 768

If you, like me, were relying on bootstrap 3 for creating a responsive website and trying to style your elements in your grid, so that they look nice also between xs (480px) and sm (768px) you would have noticed that there are no col-* classes that support this particular case.

I googled and found a suggestion for improvement to add a new class called sm in bootstrap3. Sadly, the suggestion was ignored and if you need to make your website look good for window sizes between 480px and 768px you must implement the feature yourself, or use what the community (andyl in this case) is offering you.

Conclusion: if you need this feature, read the discussion I linked above and build bootstrap using the LESS or SASS scripts linked there. If you are still new to bootstrap, less, sass etc. the fastest way is to include andyl’s bootstrap_ms.css (with my update).

Just include it after the main bootstrap file, like this:

<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap_ms.css" />

2 thoughts on “Bootstrap 3 add size between xs 480 and sm 768

Leave a Reply

Your email address will not be published. Required fields are marked *