Шпаргалка з 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
Зовнішній відступ на початку (зліва в LTR, з урахуванням RTL)
me-3
Зовнішній відступ у кінці (справа в LTR, з урахуванням RTL)
ps-2
Внутрішній відступ на початку, з урахуванням RTL
pe-2
Внутрішній відступ у кінці, з урахуванням 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
Вирівняти текст по початку, з урахуванням RTL
text-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
Повністю заокруглена форма таблетки
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">
Легке спливне сповіщення (toast)
<div class="offcanvas">
Бічна панель off-canvas
<div class="spinner-border">
Індикатор завантаження (spinner)
<nav><ul class="pagination">
Посилання посторінкової навігації
Помічники та інше
11data-bs-theme="dark"
Увімкнути темний режим у межах області
<div class="ratio ratio-16x9">
Адаптивний блок із співвідношенням сторін
visually-hidden
Приховати візуально, зберегти для зчитувачів екрана
visually-hidden-focusable
Приховано до фокусування (skip-посилання)
stretched-link
Зробити батьківський елемент повністю клікабельним
clearfix
Очистити обтікання нащадків
<div class="vstack gap-2">
Вертикальний стек елементів
<div class="hstack gap-2">
Горизонтальний стек елементів
<a class="icon-link">
Посилання, вирівняне з вбудованою іконкою
<div class="progress">
Контейнер індикатора прогресу
<nav class="breadcrumb">
Навігаційний ланцюжок (breadcrumb)
Жоден запис не відповідає “:q”.
Потрібна допомога?
Виникла проблема з цим інструментом? Повідомте нас.