Now that we know what benefits Bootstrap and other front-end frameworks offer, let's walk through how to download and install Bootstrap into one of our own projects.
There are multiple ways to download Bootstrap. We'll address the two simplest approaches here. In future courses you'll explore additional ways to integrate Bootstrap and other frameworks into a project.
Right in the header of Bootstrap's website is a Download Bootstrap button:
Clicking this button will take you to their Downloads page, where you'll be presented three options:
Select the Download Bootstrap button from the first option:
Clicking this link will begin a download. Our lessons use Bootstrap version 3.3.7, make sure you use this specific version in your own projects.
The downloaded folder should contain several subdirectories called css, fonts, and js, each containing multiple files, like this:
The fonts folder contains a collection of glyphicon icons in a variety of different file formats.
The css folder contains the big Bootstrap stylesheet in a variety of formats.
bootstrap-theme. These are all the same stylesheet, in different formats.
bootstrapwith a variety of different file extensions. These are different versions of the big Bootstrap stylesheet we'll be integrating into our projects.
.minfiles are minified. Minified means whitespace and other characters unnecessary for computers to read the code has been removed. This means code is less readable to human eyes, but has a smaller file size. It's alright if the code isn't in the most readable format, because we will not edit Bootstrap's code directly.
.mapfiles are for tools called CSS pre-processors that integrate additional functionality into CSS. We won't use these tools in Intro to Programming so we won't use these
For our projects we'll use either the
bootstrap.css file, or the
bootstrap.min.css file. Again, these contain the same CSS, but one is minified.
To integrate Bootstrap into our project, we simply need to add one of these files to our project's css folder (the same place our own stylesheets reside) by either dragging-and-dropping them, or using the
$ mv command in the terminal.
Once the Bootstrap stylesheet is located in our css folder, we must link to it in our site's
<head> tags, just like our own stylesheets:
... <head> <link href="css/bootstrap.css" rel ="stylesheet" type="text/css" media="all"> <link href="css/styles.css" rel="stylesheet" type="text/css" media="all"> <title>Media Queries</title> </head> ...
(Note: When you see ellipses (
...) in a code snippet, it means portions of the file were omitted from the example. This keeps examples brief, making it easier to identify what/where new code is added.)
You can link both your own custom stylesheet, and Bootstrap's stylesheet. In fact, you're allowed to link as many stylesheets as you want! Just make sure your own stylesheet is always linked after the Bootstrap stylesheet. We'll learn why this is necessary in an upcoming lesson when we address customizing Bootstrap styles with our own CSS.
You can also add Bootstrap into a project by linking directly to their CDN. On the same Downloads page we visited above, there is a list of CDN links:
The acronym CDN is short for content delivery network. As its name implies, it's a network of servers that deliver content to users. This means the Bootstrap stylesheet exists online, and by linking to the CDN where it resides, we can load the online version of it our project, instead of placing and linking to a local version in our css folder.
We can copy/paste the link directly into the
<head> tags of our sites. You'll notice this is fairly similar to the manner we've been linking our stylesheets thus far, the
href property simply refers to an online location, instead of a location in our project's own directory:
... <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link href="css/styles.css" rel="stylesheet" type="text/css" media="all"> <title>Media Queries</title> </head> ...
The downside to installing Bootstrap with a CDN link is that you'll be unable to see Bootstrap styles in your project without an internet connection, because the project needs to load the online stylesheet to use Bootstrap's CSS.
Now that we know how to get the Bootstrap framework into our own projects, we'll begin working with Bootstrap's styles in the next lesson.