Learn about the main features of this version of Bootstrap. Find out what's new and what you can expect when migrating your website to Bootstrap 4. Get an overview of the core changes, new components, what happens with typography, and the grid system.
- [Instructor] Before we get started, let's take a look at what's new in this version of Bootstrap. One of the big changes in this version is that support for IE8 and nine has been dropped. It means that this framework was designed to use with IE10 and above. Now the reason for that is that a lot of the layout structure of this version of Bootstrap has been handed to Flexbox. Flexbox is a new set of CSN properties that makes it easier to lay out content. This version of Bootstrap adds Flexbox classes to a lot of component.
It totally changes the way layout works in significant ways. Another change is that development of Bootstrap CSS has moved from the Less language to Sass. These are both programming languages for creating CSS. If you're just using the default Bootstrap CSS, though, this will not have an effect on you. Sass has been more popular in recent years, and so this decision makes a lot of sense. If you do want to customize your colors or breakpoints, or anything else about the framework, you need to know Sass in order to do so.
One thing that could impact you is that there is no longer an optional theme. In the previous version of Bootstrap, there used to be a theme that gave you more gradient and drop shadows, and those are no longer considered modern in terms of design, so they've been removed. A really big change is that the default measurement system has been changed from pixel to rem units. A rem is a unit of measurement that is based on the root size of the document. In the old version of Bootstrap, the root size was 14 pixels.
In this version, it's back up to 16 pixels, which is the default for most browsers. Rems are more flexible than pixels and can help you create better component-based sizing. Another big change is a new normalizing template called Reboot. A normalizing template makes your page work consistently across different browsers. The new version of Bootstrap uses a more opinionated version that doesn't just simplify and normalize elements, but also makes some decisions about how your page looks.
It means that you'll need to watch out for some changes, especially when migrating. Another thing that you'll notice immediately is that there are more classes that use the responsive breakpoints, so there are classes to help you not just use different column layouts at the different breakpoints, but also set display parameters and other spacing attributes using those different breakpoints. The new version of Bootstrap is smaller and simpler. There's a few reasons for that. First, it no longer includes the glyph icon set that used to come with the framework.
So if you're used to glyph icons, you'll have to find a better solution yourself. There's also a new breakpoint in Bootstrap, so in addition to SM, MD, LG, you have a new breakpoint called XL, for extra-large sizes. But the breakpoints have shifted over, so that the XL breakpoint is the same as the old LG breakpoint. In most cases, there's not even going to be an XS breakpoint, so you're going to have to make some adjustments to your grid. The XS breakpoint is now the default, so you no longer use the COL-XS class.
That class has become simply COL. If we take a look at the new versus the old grid, you'll notice that the new breakpoint is right here, and it's called COL-XL. However, it is the same size as the COL-LG breakpoint, 1,200 pixels. Some of the other breakpoints have shifted over, and we have now a new breakpoint at 576 pixels. And that means that your layouts are going to change slightly whenever you move to this new grid.
There's not a lot of new components in this version of Bootstrap, but the components have been heavily affected by the inclusion of Flexbox. So although there isn't technically a new navigation, the navs and nav bars, as well as other components, like the carousel, heavily use Flexbox. One totally new component is called Cards. It replaces Panels, Thumbnails, and Wells, and because of the new layout options with Flexbox, it becomes a much more comprehensive layout pattern. The new version of Bootstrap doesn't use the icon library called glyph icons.
Bootstrap Four is not just a major rewrite of the framework. It's a completely new rethinking of how you should lay out your pages. The rest of this course is divided into two parts. In the next few movies, we'll be discussing a lot of the new features, especially relating to layout, Flexbox and display. Then in the next chapter, we'll be looking specifically at migrating old components into the new structure.
- Reviewing the core changes in Bootstrap 4
- Using display properties
- Reviewing flexbox container options
- Designing basic cards
- Using badges
- Upgrading from Bootstrap 3
- Migrating to the new grid
- Upgrading navs
- Learning about table and form changes
- Reviewing dropdown changes
- Changing a carousel