Register to get access to free programming courses with interactive exercises

Bootstrap installation Bootstrap 5: Layout basics

Theater begins with a clothing wrap, and using Bootstrap starts with being connected to a page. Connection can be done in one of several available ways, from connecting ready-made CSS and JS files to using the SASS preprocesso, which is able to connect the necessary components.

Connecting via CDN

Before you learn how to connect via CDN, it’s important to understand what CDN is.

CDN is short for Content Delivery Network. Most often, the CDN system is a few servers in different countries around the world. They store files that can be plugged into the project. Depending on where the user is located, the file is given from the server that provides the smallest possible delay.

To connect Bootstrap using CDN, you just need to connect the necessary files in HTML. Fresh links for connecting can be found 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 will describe which components require JavaScript. If you don’t use these components, you might not have to connect scripts to the page, which will have a positive impact on the loading speed of the site. This criterion is very important in development. It’s also guided by algorithms for ranking the site in search engines.

Connecting CSS Locally

Developers don’t always want to trust external servers that they can’t control. No one can guarantee that the CDN won’t fail when it’s most needed, like when billionaire investors are checking 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 the repository, 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 in the css directory than when you connect Bootstrap via CDN. 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. If you need only the grid from Bootstrap in your project, this file is enough. In this case, there’s no need to connect all the other dependencies, including JavaScript.

  • bootstrap-reboot.css. This file, contrary to its name, doesn’t reset the standard browser styles, as reset.css, does, but sets the standard Bootstrap styles for all elements.

  • bootstrap-utilities.css. This file contains all atomic classes and Bootstrap utilities. The main utilities will be studied in future lessons.

  • bootstrap.css. A compilation of all Bootstrap styles. If you need all the styles, you just need to connect this file. This file also contains the styles of 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 of being able to fine-tune your project more, as well as create new components and utilities.

To install Bootstrap via npm 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 will be useful in creating their own components or utilities.

With this approach, development is often done using the SASS preprocessor. To connect Bootstrap to a file, we use the standard `@import`directive.

@import "../node_modules/bootstrap/scss/bootstrap";

Recommended materials

  1. Official Boilerplate Bootstrap

Hexlet Experts

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

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.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs
Layout Designer icon
Profession
Under development beginner
Layout with the latest CSS standards
start anytime 5 months

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.