One of the most important changes in this new version of Bootstrap is the addition of a smaller breakpoint in the grid. Bootstrap adds a new breakpoint at 544px, which takes over .col-xs and shifts all other breakpoints. It adds the .col-xl- class at ≥1200px. However, this means that you'll have to watch out when you're updating a site because your layouts will shift.
- One of the most important changes…in this new version of Bootstrap…is the addition of a smaller breakpoint in the grid.…Now I'm really happy about this change because…I've always felt like the old 768 pixel breakpoint…was too wide.…I can show you that in this side-by-side example…of the Bootstrap 3 Template on the left,…as well as a Bootstrap 4 template on the right.…They look pretty similar; there are some differences…between the fonts and the spacing,…but the main difference you'll notice…if you make this a little smaller…is that Bootstrap 3 breaks right around here…into a single column layout.…
And I've always felt that that wasn't exactly…a very nice way to go.…You sort of needed something to break in a smaller place.…So if you take a look at Bootstrap 4,…notice that the layout stays the same,…or similarly, until we get to…this point right here.…And now you get a single column grid,…which is, I think, a lot better.…So, let's explore what some of those changes are.…And I'll start by reviewing…the original "Bootstrap 3 Grid System".…
- Installing the upgrade
- Using Reboot.css
- Using the new grid
- Working with new navigation and card components
- Understanding table and form changes