There are a lot more options for installing bootstrap in this new version. Let's take a look at these options. Because I'm working with a pre-release version, some of these aren't going to work, so let's review them first and then I'll show you an example. The new template is definitely a lot simpler. Because it doesn't have to support IE8 and icons are gone, the files are smaller and there area less of them to install.
- [Voiceover] There are a lot more options for installing Bootstrap in this new version. So, let's take a look at what the options are, and remember that because I'm working with a pre-release version, some of these aren't necessarily going to be available in the final version, or you may see additional ones appearing, everything is still up in the air. So, we're gonna review the options first that are available right now, and then I'll show you an example of what it looks like between Bootstrap 3 and Bootstrap 4.
So, of course the most common way of installing is with a traditional link to a CDN, or a Content Delivery Network. This is just a place where you can link to from an existing template without having to download the files yourself. The other option is of course to get a development version from GitHub, with everything the developers used to create Bootstrap. It's a little bit of an overkill, but if you are interested in building a custom version of Bootstrap, you can use it.
You can use that, but you're gonna be giving up IE9 compatibility, so you'll only really be able to use that if you are using IE10 and above. You will also be able to download Bootstrap for a number of your build processes, so, things like Bower, npm, Meteor, Composer, and others, and that is a really good option if you are trying to incorporate Bootstrap into an advanced build process, not something you need to worry about if you are just using plain vanilla Bootstrap.
Now, the new template has a number of improvements. For example, there is no IE8 code, so the template is gonna be a little smaller. There is no optional CSS template before you would install the standard Bootstrap CSS, as well as an additional CSS file that gave you some gradients. That was optional before, now that's not available at all. There is also no Glyphicon font to install, so the installation will be a little bit easier.
And Bootstrap uses jQuery 2.x, that's because it doesn't need to be compatible with IE8, and so it can go ahead and use at least Bootstrap 2.x for now. So, let's take a look at the difference between these two templates. I have both a copy of the Bootstrap 3 template on the right-hand side, and a copy of the new Bootstrap 4 template on the left, with some very basic content. And you can see that just in line numbers the one on the right is a little bit longer, not very much.
You could see that because we don't need to support IE8, we can get rid of all the special comments right here, so we don't have that on the left. Also, sometimes in a Bootstrap installation you would see two links to two different style sheets. In this one, I just have the main Bootstrap CSS right now, but sometimes you would see two of those here. That is of course gone in the new version, since we only use one. Other than that, the head section looks pretty much the same. The rest of the content is down here, and you'll notice that in the Bootstrap 4 version we are going to be using jQuery, right now 2.1.4, in this Alpha 2 version, whilst in the Bootstrap 3 copy we are using jQuery 1.11.3.
And these are always gonna change a little bit, so don't worry if these numbers are slightly off. The main thing is that the new version of Bootstrap doesn't need to support IE8, so, you can use the newer and also smaller jQuery. In terms of installation and templates, the new version is going to be pretty similar to the old one. The new template is definitely going to be a lot simpler and also smaller, because it doesn't have to support IE8, the icons are gone, and so the files that you are going to have to install are going to be a little bit smaller, and there is gonna be less of them to install.
- Installing the upgrade
- Using Reboot.css
- Using the new grid
- Working with new navigation and card components
- Understanding table and form changes