Bootstrap: что это за фреймворк и как сверстать на нём первую страницу

Bootstrap (бутстрап) — бесплатный фреймворк для вёрстки: готовый набор CSS-классов и JS-скриптов, из которых сайт собирается как из конструктора. Сетка, меню, кнопки и карточки уже нарисованы, вы только пишете нужные классы в HTML. Чтобы начать, хватит двух строк в коде страницы и базового знания HTML и CSS.

Свежая деталь: 8 октября 2026 года вышла первая альфа Bootstrap 6, и главная страница getbootstrap.com теперь раздаёт ссылки на неё. Для первого сайта берите стабильную версию 5.3.8: ниже объясняем, почему, и собираем на ней страницу кофейни.

Рекомендуем курсы по Bootstrap

• Skillbox9.9 ★Профессия «Fullstack-разработчик на PHP»166 715 ₽12 месяцев
• Эдюсон9.7 ★Java-разработчик133 900 ₽8 месяцев
• Skillbox Kids9.5 ★ДО Создание сайтов для детей74 400 ₽8 месяцев
• Skypro9.7 ★Frontend-разработчик с нуля204 000 ₽9 месяцев
• GeekBrains9.4 ★Факультет Java-разработки108 000 ₽12 месяцев
• OTUS9.3 ★Web-разработчик на Python50 000 ₽5 месяцев

Все 13 курсов→

Что такое Bootstrap и зачем он новичку

Bootstrap сделали дизайнер и разработчик Twitter: сначала как внутренний набор стилей компании, а 19 августа 2011 года выложили в открытый доступ. Историю проекта команда пересказывает на странице About. По данным команды проекта, с тех пор его установили больше 1,75 миллиарда раз. Распространяется он по лицензии MIT, так что его можно ставить и на учебный, и на коммерческий сайт.

Внутри четыре части:

• Сетка из 12 колонок с шестью контрольными точками ширины. Колонки сами перестраиваются под телефон, планшет и монитор.
• Компоненты: меню, кнопки, карточки, формы, модальные окна, аккордеоны.
• Утилиты: короткие классы для отступов, выравнивания, цвета и видимости, например py-5 или text-center.
• JS-плагины: раскрытие меню, всплывающие окна, слайдеры. Работают без jQuery, с пятой версии он не нужен.

С версии 5.3 у фреймворка есть тёмная тема: атрибут data-bs-theme="dark" перекрашивает страницу или отдельный блок. Это видно и в нашем примере ниже, там так оформлено меню.

Фреймворк это или библиотека, спорят до сих пор. Практическая разница одна: Bootstrap задаёт каркас всей страницы, то есть контейнеры, ряды и колонки, а кнопки и формы встают уже в него. Поэтому его чаще называют фреймворком.

Какую версию Bootstrap брать в октябре 2026 года

На npm сейчас висят метки четырёх веток. Сведения по каждой взяты из официальной документации и анонса шестой версии:

Альфа нужна, чтобы разработчики попробовали новинки и прислали ошибки. На рабочий сайт её не ставят. Команда прямо пишет, что пятая версия остаётся на поддержке и выйдет ещё 5.4.0.

Если копируете код подключения с главной getbootstrap.com, проверьте номер в ссылке. Там сейчас bootstrap@6.0.0-alpha.1, а для учебного сайта нужен bootstrap@5.3.8 из раздела документации 5.3.

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

Способ зависит от того, как устроен ваш проект. Для первой страницы хватит первого.

Для CDN откройте документацию на вкладке Get started. В блоке Quick start лежит готовый каркас страницы.

Нужны две строки. Ссылку на стили ставят внутрь <head>, а скрипт перед закрывающим </body>:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

Атрибут integrity хранит контрольную сумму файла. Мы сверили обе суммы с файлами на CDN: совпадают. Если файл на CDN кто-то подменит, браузер его не загрузит. Файл bootstrap.bundle.min.js уже содержит библиотеку Popper, которая нужна выпадающим спискам и подсказкам, так что отдельно её подключать не надо.

Документация на английском. Есть неофициальный перевод на getbootstrap.ru, но номера версий и ссылки CDN лучше сверять с оригиналом.

CheckroiПодборка курсов по HTML208 курсов • 42 школыСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

Пошаговая инструкция: страница кофейни за вечер

Соберём одностраничник: меню, крупный заголовок с кнопкой, три карточки напитков и подвал с часами работы. Понадобится любой редактор кода. Если ещё не выбрали, посмотрите наш разбор редакторов для веб-разработки.

1. Создайте папку проекта и в ней файл index.html. Как это сделать в разных системах, мы разобрали в инструкции про HTML-файл.
2. Вставьте в файл код ниже целиком и сохраните.
3. Откройте файл двойным щелчком: он запустится в браузере. Сервер не нужен.
4. Сужайте окно браузера и смотрите, как карточки встают друг под друга, а меню прячется под кнопку.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Кофейня «Зерно»</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
</head>
<body>
  <nav class="navbar navbar-expand-md bg-dark" data-bs-theme="dark">
    <div class="container">
      <a class="navbar-brand" href="#">Зерно</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Меню">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="menu">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link" href="#menu-cards">Меню</a></li>
          <li class="nav-item"><a class="nav-link" href="#contacts">Контакты</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <header class="container py-5 text-center">
    <h1 class="display-5 fw-bold">Кофе с собой за 3 минуты</h1>
    <p class="lead text-secondary">Обжариваем зерно сами, варим на воронке и в эспрессо-машине</p>
    <a class="btn btn-primary btn-lg" href="#contacts">Как нас найти</a>
  </header>

  <main class="container pb-5" id="menu-cards">
    <div class="row g-4">
      <div class="col-12 col-md-4">
        <div class="card h-100"><div class="card-body">
          <h2 class="h5 card-title">Эспрессо</h2>
          <p class="card-text">Плотный, с шоколадной горчинкой.</p>
        </div></div>
      </div>
      <div class="col-12 col-md-4">
        <div class="card h-100"><div class="card-body">
          <h2 class="h5 card-title">Фильтр</h2>
          <p class="card-text">Лёгкий, ягодный, без молока.</p>
        </div></div>
      </div>
      <div class="col-12 col-md-4">
        <div class="card h-100"><div class="card-body">
          <h2 class="h5 card-title">Капучино</h2>
          <p class="card-text">Эспрессо и взбитое молоко.</p>
        </div></div>
      </div>
    </div>
  </main>

  <footer class="bg-light py-4" id="contacts">
    <div class="container">Работаем каждый день с 8:00 до 20:00</div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
</body>
</html>

Вот что получилось на мониторе шириной 1280 пикселей. Карточки стоят в ряд, пункты меню видны справа:

На телефоне шириной 390 пикселей та же страница выглядит иначе. Мы не написали ни одного медиазапроса, перестройку сделали классы col-12 col-md-4 и navbar-expand-md:

Нажмите на кнопку с тремя полосками, и меню раскроется. Это работа JS-файла из второй строки подключения:

CheckroiПодборка курсов по Bootstrap13 курсов • 8 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

Как устроена сетка Bootstrap

Сетка Bootstrap строится из трёх уровней: контейнер container, ряд row и колонки col. Ряд делится на 12 частей. Класс col-md-4 значит «занять 4 части из 12 начиная со средней ширины экрана», то есть треть ряда.

Ширины, на которых сетка перестраивается, называются брейкпоинтами. Их шесть, значения взяты со страницы Breakpoints:

Классы работают от меньшего экрана к большему: каждый действует от своей ширины и шире, пока его не перебьёт класс для экрана побольше. В нашем примере col-12 растягивает карточку на всю ширину телефона, а с 768 пикселей включается col-md-4. Такую перестройку под ширину экрана и называют адаптивной вёрсткой.

Под капотом это обычные медиазапросы. Как их писать руками, мы разобрали в статье про медиазапросы в CSS: пригодится, когда понадобится нестандартная раскладка. Остальные возможности сетки описаны на странице Grid system.

Классы, которые пригодятся в первый вечер

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

Готовые макеты страниц (лендинг, блог, панель управления) лежат в разделе Examples. Их удобно разбирать: открываете код, меняете тексты и смотрите, какой класс за что отвечает. Если хочется разбирать такие макеты с преподавателем и проверкой домашних заданий, посмотрите курсы по Bootstrap в нашем каталоге.

Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в канал→

Частые ошибки и что с ними делать

Первые две мы проверили на нашей странице в Chrome: подставили ошибку и посмотрели, что сломается.

• Меню не раскрывается по кнопке. Скорее всего, код взят из урока по Bootstrap 4, где атрибуты назывались data-toggle и data-target. В пятой версии нужны data-bs-toggle и data-bs-target. Мы заменили атрибуты на старые, и кнопка перестала работать.
• Меню и окна не работают, хотя атрибуты верные. Не подключён JS-файл. Проверьте, что строка с bootstrap.bundle.min.js есть перед </body> и в ней нет опечатки. Без неё меню на нашей странице тоже не открылось.
• Отступы из урока не работают. В пятой версии ml-* и mr-* переименовали в ms-* и me-*, pl-* и pr-* в ps-* и pe-*. Полный список замен есть в руководстве по миграции.
• Страница на телефоне выглядит как уменьшенная копия десктопа. Пропущен тег <meta name="viewport"> в <head>. Документация называет его обязательным для адаптивности на мобильных.
• Скопировали подключение с главной, и скрипты не грузятся. Там ссылки на альфу шестой версии, а её JS работает только с type="module" в теге <script>. Решение: взять ссылки на 5.3.8 из документации.
• Колонка уехала на новую строку. Сумма чисел в ряду больше 12, например col-md-5 плюс два col-md-4. Пересчитайте, чтобы вышло ровно 12 или меньше.

CheckroiПодборка курсов для Frontend-разработчиков109 курсов • 29 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

Когда Bootstrap не нужен

Фреймворк экономит время там, где дизайн собирают из типовых блоков: лендинги, админки, прототипы, внутренние сервисы. Но у него есть цена.

• Сайты на нём узнаваемы. Синие кнопки и одинаковые карточки видно сразу, а чтобы уйти от этого, придётся переопределять переменные.
• Готовая сборка весит больше, чем стили под одну страницу. Мы замерили файлы 5.3.8: CSS занимает 227 КБ, после сжатия около 30 КБ, скрипт с Popper весит 79 КБ, в сжатом виде около 23 КБ. Для одностраничника, где из всего этого нужны сетка и кнопка, это лишний груз на медленном мобильном интернете.
• Если дизайнер нарисовал макет с нестандартной сеткой, проще сверстать его руками, чем бороться с классами.

Для учёбы Bootstrap полезен ещё и тем, что показывает, как устроены адаптивная вёрстка и компонентный подход. Эти принципы пригодятся и в React, и в любом другом инструменте.

Где освоить вёрстку и Bootstrap системно

Страницу кофейни вы соберёте за вечер. Чтобы делать сайты под заказ, нужно ещё уверенно знать CSS, JavaScript и работу с макетами из Figma. Обычно этому учат в курсах по вёрстке и фронтенду. Вот курсы по CSS из нашего каталога, их можно сравнить по цене и длительности:

Курс	Школа	Стоимость со скидкой	В рассрочку	Длитель­ность	Обзор курса от Checkroi
HTML и CSS с нуля Перейти на сайт курса	Skillbox	91 626 ₽	7635 ₽/мес.	11 месяцев	Обзор курса
HTML и CSS. Адаптивная вёрстка и автоматизация Перейти на сайт курса	HTML Academy	23 400 ₽	3900 ₽/мес.	2 месяца	Обзор курса
Основы вёрстки HTML и CSS Перейти на сайт курса	Академия Синергия	32 676 ₽	2723 ₽/мес.	3 месяца	Обзор курса
HTML и CSS с нуля	Skypro	195 160 ₽	7972 ₽/мес.	12 месяцев	Обзор курса
Frontend-разработчик: сайты на HTML/CSS/JavaScript Перейти на сайт курса	Coddy	9200 ₽	-	3 месяца	Обзор курса

• 

  HTML и CSS с нуля

  Skillbox91 626 ₽7635 ₽/мес11 месяцев
  Перейти на сайт курсаОбзор
• 

  HTML и CSS. Адаптивная вёрстка и автоматизация

  HTML Academy23 400 ₽3900 ₽/мес2 месяца
  Перейти на сайт курсаОбзор
• 

  Основы вёрстки HTML и CSS

  Академия Синергия32 676 ₽2723 ₽/мес3 месяца
  Перейти на сайт курсаОбзор
• 

  HTML и CSS с нуля

  Skypro195 160 ₽7972 ₽/мес12 месяцев
  Обзор
• 

  Frontend-разработчик: сайты на HTML/CSS/JavaScript

  Coddy9200 ₽3 месяца
  Перейти на сайт курсаОбзор

Больше программ — в полном каталоге курсов по CSS

Если думаете о работе в этой сфере, начните с обзора профессии HTML-верстальщика и нашего плана как стать фронтенд-разработчиком.