Theater begins with a clothing wrap, and using Bootstrap starts with being connected to a page. We can do it in several ways, from connecting ready-made CSS and JS files to using the SASS preprocessor to add the necessary components.
Connecting via CDN
Before you learn how to connect via CDN, it’s essential to understand what CDN is.
CDN is short for Content Delivery Network. Most often, the CDN system is a few servers in different countries. They store files that we can plug into the project. Depending on the user’s location, we receive the file from the server that provides the minimum delay.
To connect Bootstrap using CDN, you should add the necessary files in HTML. You can find fresh links on the Bootstrap documentation page. At present, it looks as follows:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap connection</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<!-- Main page layout -->
</body>
</html>
This course describes which components require JavaScript. If you don’t use these components, you may not need to link scripts to the page, which improves the page’s loading speed. This criterion is essential in development. Search engine ranking algorithms also use it.
Connecting CSS Locally
Developers don’t always want to trust external servers they can’t control. No one can guarantee that the CDN won’t fail when it’s most needed, like when billionaire investors check it out. To avoid this situation, you can place all the Bootstrap files in your working directory and connect them locally.
You can download all the necessary files from the official Bootstrap page or via the GitHub repository. If you use it, then it’s the dist directory you want to look at.
Inside the dist directory, we can find the following structure of CSS files:
bootstrap/
├── css/
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-utilities.css
│ ├── bootstrap-utilities.min.css
│ ├── bootstrap.css
│ └── bootstrap.min.css
There are more files than when you connect Bootstrap via CDN in the CSS directory. With this approach, it’s possible to include only the necessary parts of CSS:
bootstrap-grid.css. The file contains all the styles responsible for creating grids. This file is enough when you need only the Bootstrap grid in your project. In this case, we can skip all the other dependencies, including JavaScriptbootstrap-reboot.css. Contrary to its name, this file doesn’t reset the standard browser styles likereset.cssbut sets the standard Bootstrap styles for all elementsbootstrap-utilities.css. This file contains all atomic classes and Bootstrap utilities. We will study the main utilities in future lessonsbootstrap.cssis a compilation of all Bootstrap styles. If you need all of them, you should connect this file. This file also contains the styles for all components
Let’s create a project that uses only the grid and bootstrap utilities:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap connection</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-utilities.min.css">
</head>
<body>
<!-- Main page layout -->
</body>
</html>
When connecting styles to a project, it’s better to use minimized versions of the files. They have a .min appendix in their name. These files are compressed, which reduces the weight of the styles.
Connecting using an npm package
The last method is to connect Bootstrap using the npm package. At the same time, you’ll get access to all Bootstrap SASS files, opening up the possibility to fine-tune your project and create new components and utilities.
To install Bootstrap via the npm package, use this command:
npm install bootstrap
After that, the bootstrap directory will appear in the node_modules directory. Inside it, besides compiled CSS and JS files, there’ll be SASS files, which help to create their components or utilities.
With this approach, developers use the SASS preprocessor. To connect Bootstrap to a file, we use the standard @import directive:
@import "../node_modules/bootstrap/scss/bootstrap";
Do it yourself
Create a directory named project-bootstrap. Install and connect Bootstrap to an HTML page using any methods described in this lesson. In subsequent extra tasks, you will create a small layout using Bootstrap representing a product catalog.
Recommended materials
For full access to the course you need a professional subscription.
A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.
