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".
Bootstrap 3 has a standard 12-column grid you can use in any of your layouts. You do that by adding a series of CSS classes onto your markup. And what you do is you create a ".container", or a ".container-fluid" class that wraps all of your grid content. The difference is that a fluid grid is the entire width of the container, so you don't have the content adjusting to specific breakpoints. Most of the time, I tend to use a regular container.
Now in order to work with the columns, you have to create another container inside the main container with a class of ".row". This is going to set up the space for the rest of the columns. And the columns are always one of these classes in Bootstrap 3: ".col-xs-", ".col-sm-", ".col-md-", and ".col-lg-". So those are extra small, small, medium, and large. And those breaks happen at the following pixel sizes.
So if the layout is "<768px", then you get a single page layout at that breakpoint. If it's ">=768px", it's at the small breakpoint; ">=992px" is at the medium breakpoint, and ">=1200px" happens to be the large breakpoint. So let's take a look at how that works in Boostrap 4. It's a little bit different. There is a new breakpoint at "544px", and that means that all of the other breakpoints sort of shift a little bit.
So the grid now goes from "544px" to "1200px" and all of the other points adjust in the middle. Now, the interesting thing about this is that the new breakpoint takes over in the ".col-xs" class. So it's not like you're adding a new breakpoint at the end, you're actually adding it at the beginning. And it doesn't get a new name; it's named the same way as before, so that tends to shift all other breakpoints slightly. You do add a new name, ".col-xl-" at "1200px", and that shifts the grid in this form.
So you can see that, the Bootstrap three grid, four different breakpoints, there's the different sizes. The Bootstrap four grid, five different breakpoints, and there is where everything is happening. I really love the new additional breakpoint. The old 768 breakpoint was way too wide and didn't work well for small devices. Oftentimes whenever I was looking at something in a tall version of an ipad or a tall tablet, I could see that everything went to one column, and that's really not what I wanted most of the time.
However, this does mean that you're going to have to watch out when you're updating a website, because your layouts are going to shift a little bit.
- Installing the upgrade
- Using Reboot.css
- Using the new grid
- Working with new navigation and card components
- Understanding table and form changes