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:
cssfolder contains files related to Bootstrap CSS. We can use either
bootstrap.min.cssin our projects. Here's the difference between the two files:
bootstrap.cssis 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.cssis 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.cssfor learning purposes.
We won't worry about other files in the
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 option under the section titled "jsDelivr" on Bootstrap's download page. jsDelivr is a content delivery network.
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
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
... <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <link href="css/styles.css" rel="stylesheet" type="text/css" media="all"> <title>Media Queries</title> </head> ...
crossorigin attributes are used for Subresource Integrity (SRI) checking. According to srihash.org, SRI checking allows browsers to ensure that resources hosted on third-party servers (like Bootstrap's CSS library that we are accessing via CDN) have not been tampered with. Performing SRI checking is a best practice set by W3C, the World Wide Web Consortium, an international organization that sets standards for the web.
Note, you do not need to retain any of the above information. However, it is interesting and you are welcome to read more on your own!
You likely also noticed a
<script> tag in the Bootstrap CDN links:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script> tag for Bootstrap's JS library in your project's
<head> tags of your HTML document.
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 57 of 66
Last updated October 6, 2022