Lesson Thursday

Now that we know what benefits Bootstrap and other design frameworks offer, let's walk through how to download and install Bootstrap into one of our own projects.

Downloading Bootstrap

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.

Downloading Files from Bootstrap's Website

Right in the header of Bootstrap's website is a Download Bootstrap button:

bootstrap-homepage-with-download-button

Clicking this button will take you to their Downloads page, where you'll be presented three options:

bootstrap-download-page

Select the Download Bootstrap button from the first option:

bootstrap-download-page-with-annotation

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.

Bootstrap Download Contents

The downloaded folder should contain several subdirectories called css, fonts, and js, each containing multiple files, like this:

bootstrap-downloaded-files

  • The fonts folder contains a collection of glyphicon icons in a variety of different file formats.

  • The js folder contains JavaScript code necessary for animations, pop-ups, alerts, and other visual effects, as described here. We won't begin implementing JavaScript into our projects until later in the course.

  • The css folder contains the big Bootstrap stylesheet in a variety of formats.

    • There are several files in this folder that begin with bootstrap-theme. These are all the same stylesheet, in different formats. bootstrap-theme contains additional styles meant to work with the JavaScript animations and visual effects. Since we won't be integrating JavaScript into our projects quite yet, we won't use these files either.
    • There are also several files named bootstrap with a variety of different file extensions. These are different versions of the big Bootstrap stylesheet we'll be integrating into our projects.
    • The .min files 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.
    • The .map files 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 .map files, either.

Adding a Downloaded Copy of Bootstrap to a Project

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.

Linking to a CDN

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:

CDN-links-on-bootstraps-website

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.

Until we work with JavaScript, you should use the first CDN link if you choose to add Bootstrap into your project(s) in this manner, because it does not include JavaScript files:

CDN-links-with-annotation

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.

Terminology

  • Minified: 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. Minified files generally include a .min in their name.

  • CDN: Short for "content delivery network", a network of servers that deliver content to users. We can load Bootstrap into a project by linking to its CDN location. This simply links to an online version of Bootstrap's stylesheet(s) instead of a version we download and place into our project's directory.

Tips

  • 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.

  • For now, we'll use either the bootstrap.css file, or the bootstrap.min.css files in our projects.