Chapter 1.  Introducing Bootstrap 4

Bootstrap is the most popular HTML, CSS, and JavaScript framework on the planet. Whether you are new to web development or an experienced master, Bootstrap is a powerful tool for whatever type of web application you are building. With the release of version 4, Bootstrap is more relevant than ever and brings a complete set of components that are easy to learn to use. In this book, I'll jump right into using Bootstrap, what's new in version 4, and strategies you can use to get the most out of the framework. In my opinion, the best way to learn to code is through real-world examples. As we progress through the book, we'll build a blog and portfolio website so that you will have a fully functional template once you're done. In this chapter, I'll cover the following topics:

• Why should you use Bootstrap?
• What's new in Bootstrap 4?
• The basic files and template required to start a project

Introducing Bootstrap

There are several reasons to use Bootstrap but let me boil it down to a few of the key reasons I recommend it. If you're like me, you're constantly starting new web projects. One of the most frustrating parts of getting a project off the ground is to reinvent the base HTML, CSS, and JavaScript for each project. It makes much more sense to reuse the same base code and then build on top of it. Some developers may prefer to write their own framework, and in some cases this may make sense. However, with most projects, I've found that it is easier to just use an existing framework. On top of the components that Bootstrap provides out-of-the-box, there are hundreds of other third-party components you can integrate it with, with a large community of other developers to help you.

Bootstrap is also a powerful prototyping tool in the start-up world. Often, you will want to vet an idea without investing tons of time into it. Bootstrap allows you to quickly build a prototype to prove out your idea without a large time commitment to build out a frontend that you might not end up using. Even better, if you're working in a team of developers, it is very likely everyone will be familiar with the framework. This will allow for code consistency from day one. No arguing over how to name the selectors or the best way to structure a CSS file. Most of the configuration is already set up for you and you can get on with creating your project faster.

Bootstrap 4 advantages

With the release of Bootstrap 4, there are a number of key updates to the framework. One of the biggest changes is the move from Less, which is a CSS preprocessor, to Sass. When Bootstrap first started out, there was no clear favorite when it came to preprocessors. Over the last couple of years, Sass has gained a bit of an edge, so this switch should come as no surprise. If you haven't used Sass before, don't worry; it is similar to Less and really easy to learn. In later chapters, I will cover Sass in greater depth.

Improved grid system and flexbox

Another big new feature in version 4 is the improved grid system and the inclusion of flexbox. For the regular grid, another grid level has been added to better target mobile devices, and media queries have been reworked too. Flexbox is the grid of the future and it's really exciting that it's been included. By default, the regular grid will work out-of-the-box but you can switch to the flexbox grid by switching a simple Sass variable to take advantage of this new layout component.

Card component

Bootstrap 4 sees the deprecation of components such as wells, thumbnails, and panels, and the introduction of the new card component. This is a good thing for a couple of reasons. First of all, it removes a few components that were similar and replaces them with a single card component. This makes the framework a little lighter and easier to learn for the new user. The card component has also seen an increase in popularity lately, so it makes sense to include it here. All one has to do is to look at the popularity of Google's Material Design to see how cards are a great component to use in a web application.

Rebooting normalize.css

One change that you might not notice immediately but is great nonetheless is the improvements to the built-in CSS reset. Bootstrap has taken normalize.css and extended it with a new module called Reboot. Reboot improves on Normalize and tightens up the default browser styling that needs to be reset for all web-based projects.

Internet Explorer 8 support dropped

I couldn't be happier to see that Bootstrap has dropped support for Internet Explorer 8 (IE8). The time has come to leave this browser in the past! If you need IE8 support, the recommendation is to continue using Bootstrap 3.

Other updates

All of the JavaScript plugins that come with Bootstrap have been rewritten in ES6, which allows for the use of the latest JavaScript functionality. The tooltip and popover components have been extended to use the Tether library. This is just scratching the surface, as there are a ton of other minor updates that have been built into the framework.

Implementing framework files

Before we get into building the basic template for a Bootstrap project, we should review the files that we need to include to make the framework run properly. At the very minimum, we require one CSS file and two JavaScript files. These files can either be served from the Bootstrap Content Delivery Network (CDN) or downloaded and included directly in our project. If you are using the CDN, simply include this line of code in the head of your file:

If you would like to include the CSS file yourself, go to http://getbootstrap.com/ and download the framework. Extract the resultant ZIP file and locate the /css directory. Within this directory will be a number of CSS files. The only one you need to worry about is bootstrap.min.css. Locate that file and copy it to the /css directory of your own project. Once there, link it into the head of your document, which will look something like this:

Inserting the JavaScript files

As I mentioned earlier, we need to include two JavaScript files to implement the framework properly. The files are the jQuery and Bootstrap JavaScript framework files. As with the CSS file, you can either do this through the use of a CDN or download and insert the files manually. The JavaScript files should be inserted at the bottom of your page right before the closing </body> tag. If you choose to use the CDN, insert the following lines of code:

If you prefer to insert the files yourself, go back to the Bootstrap package you downloaded earlier and locate the /js directory. There will be a few files here but the one you want is bootstrap.min.js. You'll need to also head to http://jquery.com to download the jQuery framework file. Once you've done that, drop both files into the /js directory for your own project. Next, enter the following lines of code at the bottom of your page template. Make sure jQuery is loaded before bootstrap.min.js. This is critical; if you load them in the opposite order, the framework won't work properly:

That concludes the explanation of the key Bootstrap framework files you need to include to get your project started. The next step will be to set up the basic starter template so you can begin coding your project.

The starter template

The basic starter template is the bare bones of what you'll need to get a page going using Bootstrap. Let's start by reviewing the code for the entire template and then I'll break down each critical part: