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. 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">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap connection</title>

  <link href="" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
 <!-- Main page layout -->

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:

├── 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 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:

<!DOCTYPE html>
<html lang="ru">
  <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">
 <!-- Main page layout -->

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

  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
hours of theory

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:">Bookmate</span>
<span class="translation_missing" title="translation missing:">Healthsamurai</span>
<span class="translation_missing" title="translation missing:">Dualboot</span>
<span class="translation_missing" title="translation missing:">Abbyy</span>
Suggested learning programs
Layout with the latest CSS standards
5 months
from scratch
under development
Start at any time

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.