Bootstrap — это популярный и удобный набор инструментов, который помогает быстро делать красивые, адаптивные сайты. Он уже содержит огромное количество готовых стилей, компонентов и утилит, поэтому многие задачи решаются буквально несколькими классами в HTML.

Ниже я подробно объясню, как подключить Bootstrap, что именно требуется для корректной работы, какие файлы нужно добавить в проект и как в целом устроена структура страницы.

Навигация по статье

Как быстро подключить Bootstrap

Самый простой способ начать — использовать CDN. Это готовые ссылки на файлы Bootstrap, которые загружаются напрямую с сервера. То есть ничего не нужно устанавливать: просто добавляешь ссылки в свой HTML — и можно начинать работать.

Базовая структура HTML

Для начала создаём обычный HTML-файл. Он нужен, чтобы браузер понимал, что это современная страница и правильно отображал контент.

Важно обязательно добавить:

doctype — сообщает браузеру, что используется HTML5,
мета-тег viewport — без него адаптивность на мобильных работать не будет.

Пример простейшего шаблона:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Подключение Bootstrap (CSS + JS)

Чтобы всё заработало, нужно подключить два типа файлов:

CSS — внешние стили Bootstrap;
JS — логика интерактивных компонентов.

📢 Подписывайтесь на наш Telegram-канал.

Там вы найдете анонсы обучающих статей и видео, готовый код для ваших проектов и увлекательные курсы. Ничего лишнего — только практика, вдохновение и развитие.

👉 https://t.me/codelab_channel

Добавляем их в HTML:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>

    <!-- Стили Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">

  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- JS Bootstrap + Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Подключение JS без Popper

Если не нужны выпадающие элементы, подсказки и позиционирование, можно подключить облегчённую версию:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script>

Основные CDN-ссылки

Назначение	Ссылка
CSS	https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css
JS (bundle)	https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js

Компоненты, которые требуют JavaScript

Accordion
Alert
Button
Carousel
Collapse
Dropdown
Modal
Navbar
Tabs
Offcanvas
Scrollspy
Toast
Tooltip и Popover

Важные моменты для корректной работы

1. Doctype обязателен

<!doctype html>

2. Мета-тег viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

3. Box-sizing

Bootstrap включает глобальное правило:

*,
*::before,
*::after {
  box-sizing: border-box;
}

Чтобы вернуть поведение content-box для конкретного элемента:

.selector {
  box-sizing: content-box;
}

4. Reboot

Bootstrap включает модуль Reboot, который делает отображение HTML-элементов более предсказуемым и единообразным.

Что делать дальше

После подключения Bootstrap ты можешь:

использовать сетку для адаптивной верстки,
применять готовые компоненты: кнопки, карточки, навигацию, формы,
настраивать внешний вид через классы-утилиты,
добавлять JS-компоненты по необходимости.