Bootstrap справочник
Търсим, удобен за печат справочник за Bootstrap 5.3 — мрежа, отстояния, типография, цветове, flex помощници, бутони, формуляри и компоненти. Безплатно.
Решетка и оформление
12<div class="container">
Адаптивен контейнер с фиксирана ширина
<div class="container-fluid">
Контейнер с пълна ширина при всеки breakpoint
<div class="container-md">
100% ширина до breakpoint-а md
<div class="row">
Ред от решетката, съдържа колони
<div class="col">
Авто колона с равна ширина
<div class="col-6">
Заема 6 от 12 колони
<div class="col-md-4">
4 колони от breakpoint-а md нагоре
<div class="col-auto">
Колона с размер по съдържанието
<div class="offset-md-2">
Избутва колона 2 колони надясно
<div class="row g-3">
Разстояние (gutter) между колоните
<div class="row row-cols-3">
Налага 3 равни колони на ред
<div class="order-2">
Пренарежда flex/grid колона
Помощни класове за разстояния
12m-3
Margin от всички страни (скала 0-5)
mt-2
Margin отгоре
mx-auto
Авто хоризонтални margin-и за центриране
p-4
Padding от всички страни
py-2
Вертикален padding (отгоре и отдолу)
ms-3
Margin в началото (ляво в LTR, отчита RTL)
me-3
Margin в края (дясно в LTR, отчита RTL)
ps-2
Padding в началото, отчита RTL
pe-2
Padding в края, отчита RTL
gap-3
Отстояние между flex/grid елементи
m-n1
Отрицателен margin
p-md-5
Адаптивен padding от 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
Display и позициониране
12d-none
Скрива елемента
d-md-block
Показва като block от breakpoint-а 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">
Стилизиран падащ 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">
Групира полета с add-on елементи
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“.
Нуждаете се от помощ?
Открихте проблем с този инструмент? Кажете ни.