Bootstrap v4 Grid Options Changes

Bootstrap v4 ison it’s way and if you’re a seasoned Bootstrap user, you experienced the annoyances of the extra small device breakpoint being 768px. Often we just create a new media query somewhere in the 500px range for mobile devices.

New Bootstrap v4 Breakpoints

Here is what the current Bootstrap 3 grid options look like for responsive breakpoints:
Bootstrap 3 Grid Options

Luckily Bootstrap 4 has fixed that issue by creating a new ‘extra large’ grid option. They also introduced a new grid breakpoint at 576px! We can’t tell you how long we’ve been waiting for this. Here is what the new Bootstrap 4 grid options look like:
Bootstrap 4 Grid Options

Other than adding in an extra responsive grid breakpoint, the columns work the same way – only they use flexbox. If you haven’t familiarized yourself with flexbox yet, we suggest you start here.