The Missing (Bootstrap) Breakpoint

Bootstrap 3 is an incredibly useful framework — used by many — but lacking an important breakpoint in a region where it’s arguably, most needed.

Some background

Bootstrap 3 released with four breakpoint regions: large (lg), for larger screens and everything north of 1200px, medium (md), for targeting widths 992px and up, small (sm) for tablet sized devices or screens, 768px and above, and then extra small (xs) as the catch all default. It’s a good set, but because of the way the grid framework is set up, there is essentially a gap where we lose the ability to target at sizes that are arguably the most relevant and sensitive to variation in size.

The ‘mid-small’ range

The mid-small breakpoint range splits the current default range of everything below 768px to target 480px to 768px. To generalize, this better addresses portrait oriented tablets, leaving the extra-small or default to handle ‘phone’ size devices. This fork includes additions for all corresponding grid-based and responsive utility classes. It adds a tiny bit of complexity (as much as one might expect) an isn’t likely to break existing sites, but is not entirely backwards compatible as pointed out by mdo.

I’m late, I know

Bootstrap 3 has been out for over a year now, which means I’m a bit late to the party with this. I forked my solution privately and didn’t think about making it public before now because an isolated fork just felt like a less than ideal way to share a patch for such a widely used, actively supported tool. I’m not convinced that it’s an ideal way to share this addition, even compared to a standalone, (mostly clean) patch like this gist by Jakobud. But I wanted my own integrated version for some other projects, and thought I might as well share it with the hopes that a few others find some use from it before the next major version of Bootstrap gets released.

This is a fork of the sass flavor of bootstrap. Let me know if you have any feedback!

Sass fork of Bootstrap with ‘mid-small’ breakpoint:

Like what you read? Give Jeff French a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.