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:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">

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:

<link rel="stylesheet" href="/path/to/your/file/bootstrap.min.css">

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:

<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.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>

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:

<script src="/path/to/your/files/jquery.min.js"></script> 
<script src="/path/to/your/files/bootstrap.min.js"></script>

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:

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <!-- Required meta tags always come first --> 
    <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"> 
 
    <!-- Bootstrap CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"> 
  </head> 
  <body> 
    <h1>Hello, world!</h1> 
 
    <!-- jQuery first, then Bootstrap JS. --> 
    <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.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script> 
  </body> 
</html>

HTML5 DOCTYPE

Like most projects nowadays, Bootstrap uses the HTML5 DOCTYPE for its template. That is represented by the following line of code:

<!DOCTYPE html>

Avoid using other DOCTYPES such as XHTML strict or transitional or unexpected issues will arise with your components and layouts.

Structuring the responsive meta tag

Bootstrap is a mobile-first framework so the following meta tag needs to be included to allow for responsive web design. To make sure your project renders properly on all types of devices, you must include this meta tag in the <head> of your project:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

If you're interested in learning more about how responsive web design works in Bootstrap, you should check out the documentation at: http://v4-alpha.getbootstrap.com/layout/responsive-utilities/ .

That brings to a close the most important parts of the template that you need to be aware of. The remainder of the code in the starter template should be straightforward and easy to understand.

Normalizing and Rebooting

As I mentioned earlier, Bootstrap uses normalize.css as the base CSS reset. With the addition of the Reboot reset, Bootstrap extends Normalize and allows for styling to only be done using CSS classes. This is a much safer pattern to follow, as it's much easier to deal with CSS specificity if you are NOT using CSS IDs for styling purposes. The CSS reset code is baked right into bootstrap.min.css so there is no need to include any further CSS files for the reset.

Taking the starter template further

Although we have our template set up, one of the main problems with static websites is when things change. If your project grew to 50, 100, or 500 pages and you wanted to possibly update to a new version of Bootstrap, you might be looking at having to update all of those files. This is extremely painful, to put it mildly. Now we enter static site generators.

Using a static site generator

One of the hottest trends right now in web development is the use of static site generators. What exactly does that mean? Instead of having several static files that require updating every time something changes globally, you can use a series of base templates then load your body content into them. This is sometimes called includes or partials. This way, you only have one or two layout files that include the header and footer code.

Then, when something changes, you only have to update a few files instead of 500. Once your website is complete, you then generate a version that is plain HTML, CSS, and JavaScript, and deploy it to your server. This is what I would call creating your own frontend web development environment. This is also how most people work on larger projects nowadays to keep them manageable.

Converting the base template to a generator

Why don't we integrate the basic template into a generator so I can show you what I'm talking about? My generator of choice is called Harp.js and you can install it over at http://harpjs.com/.

Before we get too far ahead of ourselves, we need to install Node.js. Harp runs off Node.js so it's a dependency you'll need to use. If this feels too advanced for you, feel free to skip ahead to Chapter 2 , Using Bootstrap Build Tools. This section is totally optional. Head to the following URL to install Node.js if you don't already have it on your computer: https://nodejs.org/download/ .

Follow the instructions on the Node.js website and, once you've finished installing it, run the following command in a command-line application such as Terminal or Cygwin:

$ node -v

This should spit out the version number of Node.js that you just installed and will also confirm that the installation worked. You should see something like this:

$ v0.10.33

Perfect, now let's move on to installing Harp.

Installing Harp.js

If you closed your command-line app, open it back up. If you are on a Mac, run the following command to install Harp:

$ sudo npm install -g harp

If you happen to be on a Windows machine, you'll need to enter a slightly different command, which is as follows:

$ npm install -g harp

After the installation completes, run the following command to get the Harp version number, which will also confirm that the installation was successful:

$ harp version

Adding Sass in Harp

I should also mention that most static site generators will also have built-in CSS preprocessors. This avoids you having to compile your Sass code somewhere else when working on your project. Harp includes both Sass and Less, so this will save you some time in upcoming chapters when we cover Sass in more detail.

Setting up the project

Before we convert our template to a Harp template, we need to set up the project structure. Create a new folder on your computer for the project then create the following subdirectories:

css
js
img (if you plan on using images)
partial
fonts

Inserting the CSS

If you're storing the CSS files locally, copy bootstrap.min.css from your original project and add that into the new /css folder. In a future chapter, I'll show you how to code a custom Bootstrap theme. That file would also be included within this directory.

Inserting the JavaScript

The same pattern for the CSS will also apply to the JavaScript files. If you are storing jquery.min.js and bootstrap.min.js locally, then copy them into the new /js directory.

Other directories

The /img directory is optional and only applies if you plan to use images in your project. Ignore the /partial directory for now and I'll cover that a bit later. In the /fonts directory, you should drop in the Glyphicons icon set that comes with Bootstrap. If you downloaded Bootstrap, go back to the downloaded package and locate the font files. Copy them into this directory. Now that we have the project structure set up, we can start to break the basic page template down into a few different pieces.

Setting up the layout

In the root of your new Harp project, create a new file called _layout.ejs. EJS stands for Embeddable JavaScript and it's a type of template file that allows us to do more than just standard HTML. Within that file, copy and paste the code from our basic starter template. After you've inserted the code, we're going to make one change:

Locate the following line in the template and cut and paste it into a new file. Save the file and call it index.ejs:
```
      <h1>Hello, world!</h1> 
```
Return to the layout file and insert the following line of code immediately after the <body> tag:
```
      <%- yield %> 
```
Save both files then let me explain what is happening. The yield tag is a variable. Any page template such as index.ejs that lives in the same directory as the layout will be loaded in wherever you place the yield in the layout. So the Hello, world! line we inserted in the index.ejs file will load in here once you compile and launch your project.

Are you starting to see the advantage to this method? You could then go on and create other page templates so that all use this layout. In the future, if you need to make a change to the <head> of the layout, you only have to edit the one template file and it will be compiled into all of your final HTML files.

Compiling your project

Now that the template files are ready, we need to compile the project before we can preview it in the browser. Head back to your command-line app and make sure you are in the root of your project directory. Once there, run the following command to compile the project:

$ harp compile

Assuming you see no errors, your project was compiled successfully and can now be previewed in the browser. Before we move onto that step, though, take a look at your project directory and you'll see a /www folder. On compiling, Harp creates this directory and inserts the plain HTML, CSS, and JavaScript files. Assuming the website looks good when you preview, you then deploy the contents of the /www directory to your web server. More on deployment shortly.

Previewing your project

Harp has a built-in node web server that you can use to preview your project locally before deploying it. Open up your command-line app and run the following command from the root of your Harp project:

$ harp server

After doing so, you should see a message in the Terminal telling you that the server is successfully running. Open a web browser and navigate to the following URL to preview your project: http://localhost:9000.

Your project will load up in the browser and you should see the Hello, world! message that was inserted on compile. This is only a fraction of what you can do with Harp. To learn more about how Harp works, visit their website at https://harpjs.com/.

Deploying your project

If you're looking for a simple way to quickly deploy your project for testing, there is a tool called Surge from the same people that developed Harp. Surge is a free deployment solution; visit their website to learn more at http://surge.sh/.

Installing Surge

To install Surge, you'll need to open up your Terminal again. Once you have done this, run the following command:

$ npm install --global surge

This will install Surge and make it available anywhere on your computer.

Using Surge to deploy your project

To deploy your new project, navigate back to the root directory in the Terminal then run the following command:

$ surge

You'll now be prompted to log in or create a new account. Surge is free but you need to register an account to use it. You'll also notice in the Terminal that there is an autogenerated URL. This is the URL you can use to view your project live on the Internet. Once you've finished registering or logging in, visit the URL in your browser. If all went well, you should see the basic hello world page live.

Surge is a great tool if you're looking for a quick way to test your project on a live web server. If all goes well, you can then manually deploy your project to your own web server. Surge does offer a paid plan allowing for the use of a custom domain. So you could actually use it for your production deployment if that seems like a good idea.

Table of Contents for Bootstrap 4 – Responsive Web Design