Lesson Thursday

In this lesson, we'll 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:

  • Downloading the Bootstrap source code and then adding the files directly to your project
  • Using a CDN (content delivery network) to link to Bootstrap online

In future courses, we'll explore additional ways to integrate Bootstrap and other frameworks into a project.

Downloading Bootstrap

The first way we can add Bootstrap to a project is to download all of the necessary files and add them to our project. Then we'll link to them in our HTML just like we link to our CSS file.

Downloading Files from Bootstrap's Website

We are currently using Bootstrap version 4.5, which can be downloaded here. Note that later versions of Bootstrap will have differences from the version we use. However, most core functionality will still be the same. We do not recommend using other versions of Bootstrap with our curriculum.

Click the Download button of the first option, which is Compiled CSS and JS.

This will download a .zip file. Click on the file to decompress it. Here's what's inside:

Contents of Bootstrap folder

There are two directories: css and js.

  • The css folder contains files related to Bootstrap CSS. We can use either bootstrap.css or bootstrap.min.css in our projects. Here's the difference between the two files:
    • bootstrap.css is the larger version of the source code. If we open this file, we'll be able to read all the CSS rules, which can be very helpful when we are just learning about Bootstrap - and when we want to figure out how to override a Bootstrap rule.
    • bootstrap.min.css is a minified file, which means that the source code has been compressed so that it's more efficient for machines to read. However, it's not in a human-readable form anymore. This is great for production (code that's deployed online) because it's faster, but it's not so great for development (code that's in the process of being built - which is exactly what we are doing). We recommend using bootstrap.css for learning purposes.

We won't worry about other files in the css directory.

  • The js directory contains JavaScript code necessary for animations, pop-ups, alerts, and other visual effects, as described here. We aren't ready to implement JavaScript in our projects yet so we won't worry about this directory for now.

Adding a Downloaded Copy of Bootstrap to a Project

To integrate Bootstrap into our project, we simply need to move bootstrap.css into the css directory of the project we're working on. This would be a good time to practice the $ mv command in the terminal, though it's also fine to drag and drop the file.

Once the Bootstrap stylesheet is located in our css folder, we need to link to it in our site's <head> tags, just as we do with 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 the new code that has been added.)

As we see here, we can link to multiple stylesheets. However, it's very important that our stylesheet is listed after the Bootstrap stylesheet. This way, the rules in our stylesheet will override rules that have the same name in the Bootstrap stylesheet. We'll cover this further in a future lesson.

Linking to a CDN

We can also add Bootstrap into a project via a content delivery network, or CDN. This is the third option on Bootstrap's download page.

CDN-links-on-bootstraps-website

A content delivery network is exactly what it sounds like - a network of servers that make content available for users. In this case, Bootstrap is making its stylesheets available online, which means we can just load the online version directly to our project without needing to add any files to our css directory.

We can copy/paste the link directly into the <head> tags of our sites. This is similar to the manner we've been linking our stylesheets so far. The only difference is that the href property refers to an online location instead of a location in our css directory:

...
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <link href="css/styles.css" rel="stylesheet" type="text/css" media="all">
  <title>Media Queries</title>
</head>
...

If we use a CDN, we have to have an internet connection for it to work - otherwise our project won't be able to access the content. Overall, though, CDNs are a great way to go - they are very fast and reliable.

Ultimately, both approaches we mention above work well. Now that we know how to add Bootstrap to our own projects, we're ready to start working with Bootstrap styles.

Terminology

  • Minified: A file where unnecessary characters have been removed, making the file smaller and more efficient. Because whitespace is removed and words are reduced to single letters, this code is hard for humans to read. 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.

Lesson 51 of 60
Last updated January 13, 2021