<!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>Register to get access to free programming courses with interactive exercises
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:
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 bootstrapAfter 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
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
- Article “How to Learn and Cope with Negative Thoughts“
- Article “Learning Traps“
- Article “Complex and simple programming tasks“
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.
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
Our graduates work in companies:
Suggested learning programs
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
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.