Much has changed since Twitter's Bootstrap was first released on August 19th, 2011. In essence, Bootstrap 1 was a collection of CSS rules offering developers the ability to lay out their website, create forms, buttons, and help with general appearance and site navigation. With respect to these core features, Bootstrap 4 Alpha 4 is still much the same as its predecessors. In other words, the framework's focus is still on allowing developers to create layouts, and helping to develop a consistent appearance by providing stylings for buttons, forms, and other user interface elements. How it helps developers achieve and use these features, however, has changed entirely. Bootstrap 4 is a complete rewrite of the entire project, and, as such, ships with many fundamental differences to its predecessors. Along with Bootstrap's major features, we will be discussing the most striking differences between Bootstrap 3 and Bootstrap 4 in the sub-sections that follow.

Content styling

Just like its predecessor, Bootstrap 4 overrides the default browser styles. This means that many elements, such as lists or headings, are padded and spaced differently. The majority of overridden styles only affect spacing and positioning; however, some elements may also have their border removed. The reason behind this is simple: to provide users with a clean slate upon which they can build their site.

Building on this clean slate, Bootstrap 4 provides styles for almost every aspect of your web page such as buttons (Figure 1.2), input fields, headings, paragraphs, special inline texts, such as keyboard input (Figure 1.3), figures, tables, and navigation controls. Aside from this, Bootstrap offers state styles for all input controls, for example, styles for disabled buttons or toggled buttons. Take a look at the following screenshot:

Figure 1.2: The six button styles that come with Bootstrap 4 are btn-primary, btn-secondary, btn-success, btn-danger, btn-link, btn-info, and btn-warning

Take a look at the following screenshot:

Figure 1.3: Bootstrap's content styles. In the preceding example, we see inline styling for denoting keyboard input

Components

Aside from layout and content styling, Bootstrap offers a large variety of reusable components that allow you to quickly construct your website's most fundamental features. Bootstrap's UI components encompass all of the fundamental building blocks that you would expect a web development toolkit to offer: modal dialogs, progress bars, navigation bars, tooltips, popovers, a carousel, alerts, drop-down menus, input groups, tabs, pagination, and components for emphasizing certain contents.

Let's have a look at the following modal dialog screenshot:

Figure 1.4: Various Bootstrap 4 components in action. In the preceding screenshot we see a sample modal dialog, containing an info alert, some sample text, and an animated progress bar.

Bigger text: no more panels, wells, and thumbnails

The default font size in Bootstrap 4 is 2 px bigger than in its predecessor, increasing from 14 px to 16 px. Furthermore, Bootstrap 4 replaced panels, wells, and thumbnails with a new concept: cards. To readers unfamiliar with the concept of wells, a well is a UI component that allows developers to highlight text content by applying an inset shadow effect to the element to which it is applied. A panel also serves to highlight information, but by applying padding and rounded borders. Cards serve the same purpose as their predecessors, but are less restrictive as they are flexible enough to support different types of content, such as images, lists, or text. They can also be customized to use footers and headers. Take a look at the following screenshot:

Figure 1.5: The Bootstrap 4 card component replaces existing wells, thumbnails, and panels

New and improved form input controls

Bootstrap 4 introduces new form input controls: a color chooser, a date picker, and a time picker. In addition, new classes have been introduced, improving the existing form input controls. For example, Bootstrap 4 now allows for input control sizing, as well as classes for denoting block and inline level input controls. However, one of the most anticipated new additions is Bootstrap's input validation styles, which used to require third-party libraries or a manual implementation, but are now shipped with Bootstrap 4 (see Figure 1.6). Take a look at the following screenshot:

Figure 1.6: The new Bootstrap 4 input validation styles, indicating the successful processing of input

Last but not least, Bootstrap 4 also offers custom forms in order to provide even more cross-browser UI consistency across input elements (Figure 1.7). As noted in the Bootstrap 4 Alpha 4 documentation, the input controls are "built on top of semantic and accessible markup, so they're solid replacements for any default form control" (source: http://v4-alpha.getbootstrap.com/components/forms/). Take a look at the following screenshot:

Figure 1.7: Custom Bootstrap input controls that replace the browser defaults in order to ensure cross-browser UI consistency

Now that we know what Bootstrap has to offer, let us set up our project:

Now it is time to include Bootstrap. At its core, Bootstrap is a glorified CSS style sheet. Within that style sheet, Bootstrap exposes very powerful features of CSS with an easy-to-use syntax. It being a style sheet, you include it in your project as you would with any other style sheet that you might develop yourself. That is, open the index.html and directly link it to the style sheet.

For now, we will use the Bootstrap builds hosted on Bootstrap's official Content Delivery Network (CDN). This is done by including the following HTML tag into the head of your HTML document (the head of your HTML document refers to the contents between the <head> opening tag and the </head> closing tag):

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/
    bootstrap/4.0.0-alpha.4/css/bootstrap.min.css"> 

Bootstrap relies on jQuery, a JavaScript framework that provides a layer of abstraction in an effort to simplify the most common JavaScript operations (such as element selection and event handling). Therefore, before we include the Bootstrap JavaScript file, we must first include jQuery. Both inclusions should occur just before the </body> closing tag:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4
    /jquery.min.js"> 
    </script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4
    /js/bootstrap.min.js"></script> 

Note that, while these scripts could, of course, be loaded at the top of the page, loading scripts at the end of the document is considered best practice to speed up page loading times and to avoid JavaScript issues preventing the page from being rendered. The reason behind this is that browsers do not download all dependencies in parallel (although a certain number of requests are made asynchronously, depending on the browser and the domain). Consequently, forcing the browser to download dependencies early on will block page rendering until these assets have been downloaded. Furthermore, ensuring that your scripts are loaded last will ensure that once you invoke Document Object Model (DOM) operations in your scripts, you can be sure that your page's elements have already been rendered. As a result, you can avoid checks that ensure the existence of given elements.

Save your changes and reload the index.html in your browser. The Hello World string should now contain a green background:

Figure 1.8: Our "Hello World" styled using Bootstrap 4

Now that the Bootstrap framework has been included in our project, open your browser's developer console (if using Chrome on Microsoft Windows, press Ctrl + Shift + I; on Mac OS X you can press cmd + alt + I). As Bootstrap requires another third-party library Tether, for displaying popovers and tooltips, the developer console will display an error (Figure 1.6). Take a look at the following screenshot:

Figure 1.9: Chrome's Developer Tools can be opened by going to View, selecting Developer, and then clicking on Developer Tools. At the bottom of the page, a new view will appear. Under the Console tab, an error will indicate an unmet dependency.

Tether is available via the CloudFare CDN, and consists of both a CSS file and a JavaScript file. As before, we should include the JavaScript file at the bottom of our document while we reference Tether's style sheet from inside our document head:

    <!DOCTYPE html> 
    <html lang="en"> 
    <head> 
        <meta charset="utf-8"> 
        <meta name="viewport" content="width=device-width, initial-
        scale=1, shrink-to-fit=no"> 
        <meta http-equiv="x-ua-compatible" content="ie=edge"> 
        <title>MyPhoto</title> 
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/
        bootstrap/4.0.0-alpha.4/css/bootstrap.min.css"> 
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/
        libs/tether/1.3.1/css/tether.min.css"> 
    </head> 
    <body> 
        <div class="alert alert-success"> 
            Hello World! 
        </div> 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/
        2.1.4/jquery.min.js"></script> 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/
        1.3.1/js/tether.min.js"></script> 
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
        alpha.4/js/bootstrap.min.js"></script> 
    </body> 
    </html> 

While CDNs are an important resource, there are several reasons why, at times, using a third-party CDN may not be desirable:

Instead of relying on a CDN, we could manually download the jQuery, Tether, and Bootstrap project files. We could then copy these builds into our project root and link them to the distribution files. The disadvantage of this approach is the fact that maintaining a manual collection of dependencies can quickly become very cumbersome, and next to impossible as your website grows in size and complexity. As such, we will not manually download the Bootstrap build. Instead, we will let Bower do it for us. Bower is a package management system, that is, a tool that you can use to manage your website's dependencies. It automatically downloads, organizes, and (upon command) updates your website's dependencies. To install Bower, head over to http://bower.io/.

Once Bower has been installed, open up your terminal, navigate to the project root folder you created earlier, and fetch the bootstrap build:

bower install bootstrap#v4.0.0-alpha.4

This will create a new folder structure in our project root:

|__bower_components
  |__bootstrap
    |__Gruntfile.js
    |__LICENSE
    |__README.md
    |__bower.json
    |__dist
    |__fonts
    |__grunt
    |__js
    |__less
    |__package.js
    |__package.json

We will explain all of these various files and directories later on in this book. For now, you can safely ignore everything except for the dist directory inside bower_components/bootstrap/. Go ahead and open the dist directory. You should see three sub directories:

The name dist stands for distribution. Typically, the distribution directory contains the production-ready code that users can deploy. As its name implies, the css directory inside dist includes the ready-for-use style sheets. Likewise, the js directory contains the JavaScript files that compose Bootstrap. Lastly, the fonts directory holds the font assets that come with Bootstrap.

To reference the local Bootstrap CSS file in our index.html, modify the href attribute of the link tag that points to the bootstrap.min.css:

    <link rel="stylesheet" href="bower_components/bootstrap/dist/css
    /bootstrap.min.css"> 

Let's do the same for the Bootstrap JavaScript file:

<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 

Repeat this process for both jQuery and Tether. To install jQuery using Bower, use the following command:

bower install jquery

Just as before, a new directory will be created inside the bower_components directory:

|__bower_components
  |__jquery
    |__AUTHORS.txt
    |__LICENSE.txt
    |__bower.json
    |__dist
    |__sizzle
    |__src

Again, we are only interested in the contents of the dist directory, which, among other files, will contain the compressed jQuery build jquery.min.js.

Reference this file by modifying the src attribute of the script tag that currently points to Google's jquery.min.js by replacing the URL with the path to our local copy of jQuery:

    <script src="bower_components/jquery/dist/jquery.min.js"></script> 

Last but not least, repeat the steps already outlined for Tether:

bower install tether

Once the installation completes, a similar folder structure than the ones for Bootstrap and jQuery will have been created. Verify the contents of bower_components/tether/dist and replace the CDN Tether references in our document with their local equivalent.

The final index.html should now look as follows:

    <!DOCTYPE html> 
    <html lang="en"> 
    <head> 
        <meta charset="utf-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1,
        shrink-to-fit=no"> 
        <meta http-equiv="x-ua-compatible" content="ie=edge"> 
        <title>MyPhoto</title> 
        <link rel="stylesheet" href="bower_components/bootstrap/dist/css
        /bootstrap.min.css"> 
        <link rel="stylesheet" href="bower_components/tether/dist/css
        /tether.min.css"> 
    </head> 
    <body> 
        <div class="alert alert-success"> 
            Hello World! 
        </div> 
        <script src="bower_components/jquery/dist/jquery.min.js"></script> 
        <script src="bower_components/tether/dist/js/tether.min.js">
        </script> 
        <script src="bower_components/bootstrap/dist/js/bootstrap.min.js">
        </script> 
    </body> 
    </html> 

Refresh the index.html in your browser to make sure that everything works.

What IDE and browser should I be using when following the examples in this book?

While we recommend a JetBrains IDE or Sublime Text along with Google Chrome, you are free to use whatever tools and browser you like. Our taste in IDE and browser is subjective on this matter. However, keep in mind that Bootstrap 4 does not support Internet Explorer 8 or below. As such, if you do happen to use Internet Explorer 8, you should upgrade it to the latest version.

Aside from introducing you to our sample project MyPhoto, this chapter was concerned with outlining Bootstrap 4, highlighting its features, and discussing how this new version of Bootstrap differs to the last major release (Bootstrap 3). The chapter provided an overview of how Bootstrap can assist developers in the layout, structuring, and styling of pages. Furthermore, we noted how Bootstrap provides access to the most important and widely used user interface controls through the form of components that can be integrated into a page with minimal effort. By providing an outline of Bootstrap, we hope that the framework's intrinsic value in assisting in the development of modern websites has become apparent to the reader. Furthermore, during the course of the wider discussion, we highlighted and explained some important concepts in web development, such as typographic units of measurement or the definition, purpose, and justification of the use of Content Delivery Networks. Last but not least, we detailed how to include Bootstrap and its dependencies inside an HTML document. This sets the scene for Chapter 2 , Making a Style Statement in which we will introduce you to the Bootstrap grid system by building a general layout for the first page of our sample project.