Bootstrap has few totally new features, so this upgrade is more about simplifying the framework. However, there's a new grid breakpoint, revamped navigation, and cards. A few things have been changed slightly in the framework, which will affect your migration to this new version. Bootstrap 4 drops IE 8 support and introduces a new set of CSS rules that normalize the way different browsers work. There's no GlyphIcons or optional theme included.
- [Voiceover] So let's a take a quick look at some of the new features in this new version, as well as some of the major changes and deletions. We'll cover these in more detail in later videos. Bootstrap has a few totally new features, so this upgrade is more about simplifying the framework. Bootstrap has a default 12 column grid that is great for laying out just about any website. However, Bootstrap 3's smallest breakpoint was at 768 pixels. The new version adds an additional breakpoint at 544 pixels.
This is going to have an impact on your layouts, especially if you're working on migrating existing websites. The old Bootstrap navigation was a complete mess of overdeveloped code. The new navigation is simple and easier to style with a lot of common sense changes you're going to love. The new Bootstrap adds supports for cards. These are a really common design pattern that allows you to group content within a box in a small column layout. As a result, wells, thumbs, and panels are now gone, but you probably weren't using those anyways.
Now a few things have changed in the framework, which will affect your migration to this new version. Number one, Bootstrap 4 drops Internet Explorer 8 support, so if you need to support that browser, you'll have to stick with Bootstrap 3. Now this version also introduces a new set of CSS rules that normalize the way different browsers work. It's based on Normalize.css, and it goes beyond it, but it does have some important changes that are considered best practices in modern web development.
This version of Bootstrap also now uses Sass, specifically the version of Sass called scss, which is easier to learn and is closer to CSS itself. Now the build process for Bootstrap 4 uses a version of Sass called LibSass, which is dramatically faster than the regular Ruby version of Sass. Tables and forms both get some class modifications, but not enough to call this a revamping of those. However, that does mean that they will have an impact if you're migrating your sites, so make sure you check those videos for more information.
The responsive utilities have also gotten a lot of the changes. Now these utilities help you control what's visible at different breakpoints. Again, it will really affect your migration efforts, so I've developed some movies to take care of that. Bootstrap 3 included some icons that were part of the framework and super easy to implement. Now those are completely gone in this version, and although it's easy enough to add other icons, it's something that you'll have to do yourself. The old version used to have an optional theme that was full of gradients.
Since the world of web design is moving towards flat design, this wasn't really needed anymore, so it's gone. Now there's a lot of other small changes, but they're really too minor to cover. The best place to get more information about migrating to version four is in this part of the documentation. Now development for Bootstrap 4 has been a little bit slow, so let's take a look at what the planned path for the final release is going to be. Now first, the developers are going to release a few alphas.
As of this recording, I'm using the second alpha. There will be at least a third alpha, and then we will get a couple of beta releases. Now beta usually signify feature lock downs, so you may see a few additional features in alpha three. Then we'll probably get a couple of release candidates. This will be a final version with potential bug fixes, but no new features. And then after that, we will get the official version of the framework, also called the final release.
Now when's that going to be ready? Let's take a look at the schedule so far. So you can see that the first alpha was released on August 19, 2015, and the second alpha in December 8. Now that is a four month time frame, and it's already been four months as of this recording with no alpha three in sight. It's roughly between 76 and 79 percent complete, so although the new version of the framework looks great, there's a ton of features, and I love a lot of the new things like navigations, cards, as well as the extra breakpoints.
It has taken a while, and we'll be waiting for a few more months before we have a beta or a final release. I think it's going to be worth the wait though.
- Installing the upgrade
- Using Reboot.css
- Using the new grid
- Working with new navigation and card components
- Understanding table and form changes