Шпаргалка по Bootstrap
Доступный для поиска и печати справочник по Bootstrap 5.3 — сетка, отступы, типографика, цвета, flex-утилиты, кнопки, формы и компоненты. Бесплатно.
Сетка и макет
12<div class="container">
Адаптивный контейнер фиксированной ширины
<div class="container-fluid">
Контейнер на всю ширину на всех брейкпоинтах
<div class="container-md">
100% ширины до брейкпоинта md
<div class="row">
Строка сетки, содержит колонки
<div class="col">
Авто-колонка равной ширины
<div class="col-6">
Занимает 6 из 12 колонок
<div class="col-md-4">
4 колонки от брейкпоинта md и выше
<div class="col-auto">
Колонка по размеру содержимого
<div class="offset-md-2">
Сдвинуть колонку на 2 вправо
<div class="row g-3">
Отступ между колонками
<div class="row row-cols-3">
Принудительно 3 равные колонки в ряд
<div class="order-2">
Изменить порядок flex/grid-колонки
Утилиты отступов
12m-3
Внешний отступ со всех сторон (шкала 0–5)
mt-2
Внешний отступ сверху
mx-auto
Авто-горизонтальные отступы для центрирования
p-4
Внутренний отступ со всех сторон
py-2
Вертикальный внутренний отступ (сверху и снизу)
ms-3
Внешний отступ start (слева в LTR, учитывает RTL)
me-3
Внешний отступ end (справа в LTR, учитывает RTL)
ps-2
Внутренний отступ start, учитывает RTL
pe-2
Внутренний отступ end, учитывает RTL
gap-3
Промежуток между flex/grid-элементами
m-n1
Отрицательный внешний отступ
p-md-5
Адаптивный отступ от md и выше
Типографика
14<h1>..<h6>
Уровни заголовков со стилем по умолчанию
<p class="display-1">
Крупный display-заголовок (display-1..6)
<p class="lead">
Выделенный вводный абзац
fw-bold
Жирное начертание
fw-semibold
Полужирное начертание
fst-italic
Курсивное начертание
text-center
Выровнять текст по центру
text-start
Выровнять текст по start, учитывает RTL
text-end
Выровнять текст по end, учитывает RTL
text-truncate
Обрезать переполнение многоточием
text-uppercase
Преобразовать текст в верхний регистр
fs-1
Адаптивный размер шрифта (fs-1..6)
lh-base
Базовая высота строки (lh-1, lh-sm, lh-lg)
font-monospace
Моноширинное семейство шрифтов
Цвета и фон
10text-primary
Основной цвет текста
bg-primary
Основной цвет фона
bg-primary-subtle
Лёгкий оттенок основного фона
text-primary-emphasis
Акцентный основной текст, с учётом темы
text-bg-primary
Основной фон с авто-контрастным текстом
link-primary
Помощник для цветной ссылки
bg-opacity-50
Применить прозрачность фона 50%
text-body-secondary
Приглушённый второстепенный текст
text-body-emphasis
Высокоакцентный основной текст
border-primary-subtle
Лёгкий основной цвет границы
Утилиты flex
10d-flex
Создать flex-контейнер
flex-row
Расположить элементы в ряд
flex-column
Расположить элементы в столбец
justify-content-between
Распределить элементы по главной оси
align-items-center
Центрировать элементы по поперечной оси
flex-wrap
Разрешить перенос элементов
flex-grow-1
Дать элементу расти, заполняя пространство
flex-fill
Принудительно равные гибкие ширины
align-self-end
Выровнять отдельный элемент к концу
flex-md-row
Адаптивное направление flex от md
Отображение и позиционирование
12d-none
Скрыть элемент
d-md-block
Показать как block от брейкпоинта md
position-relative
Относительное позиционирование
position-absolute
Абсолютное позиционирование
position-fixed
Фиксированное позиционирование
position-sticky
Липкое позиционирование
top-0 start-0
Закрепить вверху-слева, учитывает RTL
translate-middle
Центрировать через transform translate
fixed-top
Закрепить элемент вверху окна
sticky-top
Прилипать к верху при прокрутке
z-3
Задать z-index (z-0..3)
invisible
Скрыть, сохранив место в макете
Размеры и границы
12w-100
Ширина 100% от родителя
w-50
Ширина 50% от родителя
h-100
Высота 100% от родителя
mw-100
Макс. ширина 100%
vh-100
Высота 100% окна просмотра
border
Добавить границу по умолчанию со всех сторон
border-0
Убрать все границы
border-primary
Окрасить границу
rounded
Скругление по умолчанию
rounded-pill
Полностью скруглённая форма pill
rounded-circle
Круглое скругление
shadow-sm
Малая тень блока (shadow, shadow-lg)
Кнопки
9<button class="btn btn-primary">
Сплошная основная кнопка
<button class="btn btn-outline-primary">
Вариант кнопки с обводкой
<button class="btn btn-lg">
Большая кнопка (также btn-sm)
<button class="btn btn-link">
Кнопка в стиле ссылки
<button class="btn-close">
Универсальная кнопка закрытия (×)
<button class="btn disabled">
Состояние отключённой кнопки
<button class="btn active">
Активное состояние кнопки
<div class="d-grid"><button class="btn">
Блочная кнопка на всю ширину через d-grid
<div class="btn-group">
Сгруппировать кнопки вместе
Формы
11<input class="form-control">
Стилизованное текстовое поле
<label class="form-label">
Подпись поля формы
<select class="form-select">
Стилизованный выпадающий список
<div class="form-check">
Обёртка чекбокса/радио
<input class="form-check-input">
Стилизованный чекбокс или радио
<div class="form-check form-switch">
Компонент переключателя
<input class="form-control-lg">
Большое поле (также form-control-sm)
<div class="input-group">
Сгруппировать поля с дополнениями
is-invalid
Состояние ошибки валидации (is-valid)
<div class="form-floating">
Поле с плавающей подписью
col-form-label
Подпись, выровненная для горизонтальных форм
Компоненты
14<div class="card">
Гибкая карточка контента
<nav class="navbar navbar-expand-lg">
Адаптивная панель навигации
data-bs-toggle="modal" data-bs-target="#m"
Вызвать модальное окно
data-bs-toggle="dropdown"
Переключить выпадающее меню
data-bs-toggle="collapse"
Переключить сворачиваемый элемент
<div class="accordion">
Сворачиваемые панели стопкой
<div class="alert alert-dismissible">
Закрываемое уведомление
<span class="badge text-bg-primary">
Маленький бейдж счётчика или метки
<ul class="list-group">
Стилизованный список элементов
<ul class="nav nav-tabs">
Навигация по вкладкам
<div class="toast">
Лёгкое всплывающее уведомление
<div class="offcanvas">
Выдвижная боковая панель
<div class="spinner-border">
Индикатор загрузки (спиннер)
<nav><ul class="pagination">
Ссылки постраничной навигации
Помощники и прочее
11data-bs-theme="dark"
Включить тёмную тему в области
<div class="ratio ratio-16x9">
Адаптивный блок с заданным соотношением сторон
visually-hidden
Скрыть визуально, оставить для скринридеров
visually-hidden-focusable
Скрыто до фокуса (ссылки пропуска)
stretched-link
Сделать родителя полностью кликабельным
clearfix
Очистить обтекание дочерних элементов
<div class="vstack gap-2">
Вертикальная стопка элементов
<div class="hstack gap-2">
Горизонтальная стопка элементов
<a class="icon-link">
Ссылка, выровненная со встроенной иконкой
<div class="progress">
Контейнер индикатора прогресса
<nav class="breadcrumb">
Навигационная цепочка (хлебные крошки)
Нет записей, соответствующих «:q».
Нужна помощь?
Возникла проблема с этим инструментом? Сообщите нам.