Bootstrap 5: Layout basics
2026-02-21 02:59 Diff
https://hexlet.io/courses/bootstrap_basic/lessons/install-bootstrap/theory_unit

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:

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:

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 JavaScript
  • bootstrap-reboot.css. Contrary to its name, this file doesn’t reset the standard browser styles like reset.css but sets the standard Bootstrap styles for all elements
  • bootstrap-utilities.css. This file contains all atomic classes and Bootstrap utilities. We will study the main utilities in future lessons
  • bootstrap.css is 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:

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:

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: