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:
In future courses, we'll explore additional ways to integrate Bootstrap and other frameworks into a project.
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.
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:
There are two directories: css
and js
.
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.
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.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.
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.
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.
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.
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