Hour 2. Downloading and Installing Bootstrap
What You’ll Learn in This Hour:
Where to get the official version of Bootstrap
How to install Bootstrap in several ways
How to get Bootstrap for Less and Sass
How to install Bootstrap with a CDN
The first step when starting to use Bootstrap is to install it on your website. In this hour you will learn some of the options you have for downloading and installing Bootstrap as well as why you might use one over another.
Where to Get Bootstrap
Although you can use almost any version of Bootstrap you would like to use, it’s best to use the most current version available. You can get this at http://getbootstrap.com/.
Try it Yourself: How to Get Bootstrap
1. Go to http://getbootstrap.com/ and click the link at the top labeled Download Bootstrap.
2. Click the Download Bootstrap button under the column titled Bootstrap, highlighted in Figure 2.1.
3. Open the Zip file. It will create a folder called dist with three subfolders: css, fonts, and js.
4. Move the three subfolders, css, fonts, and js, into the root directory of your website on your hard drive.
This will get you the most current stable version of Bootstrap. In most situations, it’s better to use the most current version of Bootstrap because then you’ll get the most current changes and bug fixes. But sometimes there might be a reason that you need to use a version one or two revs back. For example, version 4 is rumored to remove support for Internet Explorer 8. But if your site or your client requires support for that browser, you might want to use Bootstrap 3 instead. At the time of this writing, Bootstrap 4 was not available, so all examples are for Bootstrap version 3.
Caution: The Most Current Version Is Best
You can download and use older versions of Bootstrap, but you will have the best results using the most current version. This version includes more features and better browser support than older versions. The most current version as of this writing has improvements in speed, bug fixes, and accessibility improvements as well as other changes. Plus, the only version supported is the most current version, so if you have a problem with an older version, you will have to work it out for yourself.
As of this writing, Bootstrap 3 is the current version, but you can still get Bootstrap 2 at http://getbootstrap.com/2.3.2/. Be aware that this documentation will not be available forever and is put in place primarily to help people transition to version 3. You can also look at the release notes for every version back to Bootstrap 1.0 at https://github.com/twbs/bootstrap/releases.
Note: Bootstrap Requires jQuery
If you use any of the JavaScript plugins included in Bootstrap, you will also need to include jQuery in your HTML. Bootstrap 3.3.1 requires at least jQuery 1.9.1 or higher to work. You will learn more about this in Hour 3, “Build Your First Bootstrap Website with the Basic Template.”
By downloading Bootstrap, you will unzip a folder structure like Listing 2.1.
LISTING 2.1 Precompiled Bootstrap Directory Structure
bootstrap/
css/
bootstrap.css bootstrap.min.css bootstrap-theme.css 
bootstrap-theme.min.css js/ bootstrap.js bootstrap.min.js fonts/
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
Note: What Are Minified Files?
In Listing 2.1 you see versions of the CSS and JavaScript files with .min in the filename. These are files that have been “minified.” This means that these files have had all the unnecessary characters, like white space and comments, removed to make the files as small as possible. Minified files are good to use after you are familiar with Bootstrap because they take up less space on the server and help your pages download more quickly. But they can be difficult to use when you’re first getting started because they are not easy to read.
The css/ directory includes full and minified versions of the core Bootstrap CSS and the Bootstrap theme. The js/ directory includes the core Bootstrap JavaScript file and the minified version. And the fonts/ directory includes four versions of the Glyphicons font files.
Source code with Less
Sass
CDN
Source Code with Less
If you use Less and have a Less compiler, you can download the full source code for Bootstrap by clicking the button in Figure 2.2.
The Bootstrap source code includes precompiled CSS, JavaScript, and font assets along with source Less, JavaScript, and documentation. The file structure looks like Listing 2.2.
LISTING 2.2 Bootstrap Source Code Directory Structure
bootstrap/ less/ js/ fonts/ dist/ css/ js/ fonts/ docs/
examples/
The less/, js/, and fonts/ directories include all the source code for Bootstrap CSS, JavaScript, and the Glyphicons. The dist/ directory includes all the precompiled files in the precompiled Bootstrap download, and the docs/ directory includes documentation for learning how to use Bootstrap.
To use the Less source files, you need to have Node.js with npm on your server. Bootstrap uses Grunt for its build system, so you will need to install that as well.
The grunt commands you have available are
grunt dist—This regenerates the dist/ directory with the CSS and JavaScript files. This is the command you’ll use the most.
grunt watch—This watches the Less source files and automatically recompiles the CSS when you save a change.
grunt test—This tests your JavaScript using JSHint.
grunt docs—This builds and tests the CSS, JavaScript, and other assets used by the documentation.
grunt—This builds and tests everything.
If you use Bower, you can use it to install Bootstrap with Less with the command
bower install bootstrap
I will go into more detail in Hour 23, “Using Less and Sass with Bootstrap.”
Sass
Bootstrap has also been ported from Less to Sass so that you can include it in Rails, Compass, or Sass-only projects. You can learn more about Bootstrap with Sass on the Bootstrap-Sass Github: https://github.com/twbs/bootstrap-sass.
Caution: Be Sure to Use the Correct Bower Command
You might think that the Bower command to install Bootstrap with Sass would be bower install bootstrap-sass. But that was taken when Bootstrap developed this build. So be sure to use bower install bootstrap-sass-official to get the official version of Bootstrap with Sass.
You can install Bootstrap into Ruby on Rails, Compass without Rails, or Bower. To use Bower, type
bower install bootstrap-sass-official
After you’ve installed Bootstrap with Sass, you can include it in your application Sass file with the line
@import "bootstrap";
Bootstrap CDN
An easy way to install Bootstrap on a project is to use a Content Delivery Network (CDN). There are several benefits to using a CDN to host Bootstrap:
Your website does not take a bandwidth hit for downloading the files because they are hosted somewhere else.
Often CDN files are pre-cached because so many people are using them, so they help your pages load more quickly.
You don’t need command-line access to install Bootstrap.
It can be installed more quickly on any page you manage with just a few lines in the HTML.
But there are some risks to using a CDN:
If the company hosting the CDN files goes down for some reason, your website won’t work.
You can’t configure Bootstrap to include just what you need on a CDN, so the files may be larger than absolutely required.
Many people forget to update Bootstrap when using a CDN and so end up on an older version by mistake.
But for many people the pros outweigh the cons, especially as it’s so easy to install Bootstrap with a CDN. You just need two lines of code in the <head> of your HTML file, as shown in Listing 2.3.
LISTING 2.3 Install Bootstrap with a CDN
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js">
</script>
Summary
In this hour you learned about the many ways you can get and install Bootstrap. You learned about the basic install with the CSS, JavaScript, and font files. You also learned about several other ways you can install Bootstrap including source code with Less and a version for Sass. You also learned how to use a CDN to quickly install Bootstrap onto any web page where you need it.
Workshop
The workshop contains quiz questions to help you process what you’ve learned in this hour. Try to answer all the questions before you read the answers.
Q&A
Q. Can I install Bootstrap on an ASP.Net website?
A. You can install Bootstrap on any website or web application that can use JavaScript and CSS. If you don’t have access to the web server to install files in the distribution directory (dist/), then you can use the CDN to link to the Bootstrap files externally. The only exception to this would be if you are working in a content management system where you do not have access to the <head> of the HTML files. Because Bootstrap requires CSS and JavaScript installed there, if you cannot edit that area of a page, you will not be able to install Bootstrap.
Q. What about WordPress? Can I install Bootstrap in a WordPress theme?
A. Many premade themes use Bootstrap, but if you want to build your own WordPress theme with Bootstrap, you can certainly do that. Just install the Bootstrap files in your theme folder and link to them from there.
Quiz
1. If you download the precompiled version of Bootstrap, which directory will it put the files in?
a. bootstrap/
b. css/
c. dist/
d. js/
2. Which directory will the precompiled files be stored in in the source code download?
a. bootstrap/
b. css/
c. dist/
d. js/
3. Where can you download Bootstrap?
4. Why would you use an older version of Bootstrap?
a. You should never use an older version of Bootstrap.
b. You can’t use an older version because Bootstrap is updated automatically.
c. Use an older version of Bootstrap if you need support for a feature that has been removed from later versions.
5. True or False: Older versions of Bootstrap are not supported.
6. True or False: Bootstrap includes jQuery in the builds.
7. What is the bootstrap.min.js file?
a. It is not an official Bootstrap file.
b. The minimum required JavaScript file.
c. The minified Bootstrap JavaScript file.
d. The Bootstrap Less JavaScript file.
8. What does it mean if a file is minified?
a. A file that is the minimum required for Bootstrap to work
b. A file that has no unnecessary characters
c. A file that has been gzipped to make it smaller
d. A file that contains a minimal version of Bootstrap
9. What is required to install and configure Bootstrap source code with Less?
a. Node.js and npm
b. Sass
c. Bower
d. Nothing
10. Which of these is not a benefit of using a CDN to install Bootstrap?
a. CDNs can help your pages load more quickly.
b. CDNs are easier to install from.
c. You control exactly which files are installed with a CDN.
d. You don’t need shell access to your site to install Bootstrap with a CDN.
Answers
1. a. It will put all the precompiled files in the bootstrap/ directory.
2. c. The source code download puts the precompiled files in the dist/ directory.
3. b. You can download Bootstrap from the http://getbootstrap.com/ website.
4. c. Use an older version of Bootstrap if you need support for a feature that has been removed from later versions.
5. False. While it’s true that really old versions of Bootstrap are not supported, the previous version is typically supported for at least a few months after the new release to help people upgrade to the latest version.
6. False. Bootstrap does require jQuery to use the JavaScript plugins, but it does not include it in the build. If you use the JavaScript plugins, you will need to install jQuery yourself.
7. c. The minified Bootstrap JavaScript file.
8. b. A file that has no unnecessary characters.
9. a. Node.js and npm.
10. c. You control exactly which files are installed with a CDN. With a CDN, you get the version that is stored on the CDN, with no customization options.
Exercises
1. Follow the instructions to install Bootstrap on your web server. You will use this installation in the next hours to create a new website in Bootstrap.
2. Find an existing web page you want to edit, and add the Bootstrap CDN to one of the pages. You will use this page to learn how to update an existing website to Bootstrap.