In this section, we're going to see what's new in Bootstrap 4. As we go through this book, we're also going to see examples of these new features in action as we build up our different projects.

Bootstrap 4 has got quite a few new features and we will be looking at the more popular ones. Flexbox is one of the main features that has been added, also known as CSS3 Flexible Box, and it's used a lot with the grid. It allows you to accomplish the more popular layouts as well as complex layouts easily, so if you were trying to do the same thing in CSS, it would be a little more difficult and challenging. Therefore, we're going to see how Flexbox really helps make the different kinds of layout that you want to achieve in an easier manner.

LESS has been replaced with Sass, so we will see a few examples...

Without further ado, open your favorite browser and visit the Migrating to Bootstrap 4 documentation page at https://getbootstrap.com/docs/4.0/migration/:

As you can see on the Migrating to v4 documentation page, there are several things on the left, and at the bottom we have Migration. Here, you will see a lot of the different changes that Bootstrap 4 introduced, of which a few were discussed earlier. It has dropped the support for IE8, IE9, and iOS6, which is only for IE10+ and iOS 7+. It has mobile browser support as well.

In the Global changes section, you will see some of the big changes. Flexbox is enabled by default, so they're getting away from things such as floats; they've switched from LESS to Sass for CSS; and another thing is they're favoring rems instead of px. px is still being used, but there's a lot more move toward rem, and...

We are going to use the Visual Studio Code (VS Code) editor for our book. Let's go to https://code.visualstudio.com/, where you can go to the home page and learn more about the editor. Of course, as we go through this book, we're going to learn about what we need to know rather than just go through everything and do a whole tour of this editor, but here are some basics about the editor.

It's cross-platform, so you can use it on Windows or Mac, and it's free to use. One of the reasons I really prefer using this editor is, other than it being a great editor, you have an integrated terminal so you don't have to keep going out to your terminal or command line to run different commands on the command prompt. So, you can stay right here, inside of your editor, and pretty much do everything. As we move forward through this book, the...

Let's go to the Bootstrap website at https://getbootstrap.com. If you want to get the current release, you can just click the Download button and do an installation. However, that's not the route we're going to take. Here, I'll show you how we're going to install Bootstrap:

So, the current version is v4.1.3, as shown in the preceding screenshot. If you've never seen this website before, there's a lot of great documentation on Bootstrap. If you go to the menu and click on Documentation, we're going to use the Quick start to get the code going inside of VS Code. Then, we're going to do some initialization with another tool:

The website also has a few examples regarding what you can do with Bootstrap. You can check out these examples by clicking the Examples tab in the menu, as shown in the following screenshot...

In this section, we're going to look at a quick introduction to Sass, so for anyone who's never used Sass, this is just going to get you up to speed on what it is and why we want to use it. If you have used it, this is just going to be a quick refresher. So, let's go to sass-lang.com:

This is the website where you can learn all about Sass, and the documentation is also really good. If you want to explore more than what we're going to do here, this is the place to go to. So, if we go into LEARN SASS, you can really get a quick introduction into how it's used.

If you scroll down the page, you will see an SCSS syntax, as shown in the following code. We're going to basically make use of variables periodically. If you've ever used Ruby, this might look familiar, since it's written in Ruby:

$font-stack: Helvetica...

Now we're going to move on to building out our gulpfile. The first thing we want to do is put a gulpfile in the project area rather than the src file area. So, let's create a new file and call it gulpfile.js. The folder structure looks as follows:

The filename is important – you need to call it gulpfile.js so that Gulp can recognize it. Regarding our folder structure, this can be basically anything project-related or metadata-related for the forms of the parent folder, as shown previously. We have the src folder, where our actual web files are going to go, which are for displaying information on the website, or the kind of dependencies the website might need. This is how the folder structure is going to work as we go through our other different projects as well – this is going to kind of be a template.

Now, inside the gulpfile, we are going to create...

In the last section, we completed our gulpfile, so now we will add comments to the different sections of the code. We're also going to try and give this a run. We may have to do a little bit of debugging because there's quite a bit of code we had written and a lot of opportunities to make some syntax errors. Here, we'll see what happens when we try to get this to run, so let's get started. Most of the code is fairly descriptive because of the names that were given. The first two tasks were easy to understand; what the function does is gather the locations we want to compile, runs them through the compiler, drops them at a destination, and then we have our browser injection. Now let's look at the third task where we are launching the server. We will have to add comments, as follows:

//run sass when server runs
//run server
//watch for...

Let's quickly summarize what we've covered in this module. So, we got an introduction to Bootstrap 4 and what's new inside it. We've seen some great additions such as the Flexbox, the different changes they've done to the grids, we have new utilities that have come through, we have cards, and some of the new utilities such as Tether and the tool-tipping and the UI layout. Cards really are going to be a great UI feature that we can use and will probably look good on home pages or in sidebars. We also looked at our code editor, VS Code, which is made by Microsoft. It's a paired-down version of their IDE that's used to compile languages.

We also saw the integrated command-line tool and how to create a new project. Now, we have a template we can use going forward, which has got a particular folder structure. We've got Gulp for our task...