Рамки, тени, размеры и позиционирование
Последняя большая группа утилит отвечает за внешний вид и размещение блока: рамки и скругления, тени, ширину и высоту, позиционирование. Это те же свойства из учебника — border, box-shadow, width, position, — но записанные короткими классами.
Рамки и скругления
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="border p-2 mb-2">Рамка со всех сторон</div>
<div class="border-bottom border-primary border-3 p-2 mb-2">Только снизу, синяя, толщиной 3px</div>
<div class="border rounded-3 p-2 mb-2">Скруглённые углы</div>
<span class="border rounded-pill px-3 py-1">Метка-таблетка</span>| Класс | Что делает |
|---|---|
border, border-top, border-end … | Рамка со всех или с одной стороны |
border-0, border-top-0 … | Убирает рамку |
border-{цвет}, border-1 … border-5 | Цвет и толщина |
rounded, rounded-0 … rounded-5 | Радиус скругления |
rounded-circle, rounded-pill | Круг и «таблетка» |
Тени
shadow-sm — лёгкая тень, shadow — обычная, shadow-lg — глубокая, shadow-none убирает тень:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="d-flex gap-4 p-3">
<div class="shadow-sm p-3 rounded">sm</div>
<div class="shadow p-3 rounded">обычная</div>
<div class="shadow-lg p-3 rounded">lg</div>
</div>Три блока будто приподняты над страницей на разную высоту. Тень shadow-sm подходит карточкам админ-панели, shadow-lg — всплывающим окнам.
Размеры
w-25, w-50, w-75, w-100 и w-auto задают ширину в процентах от родителя, h-* — высоту. mw-100 не даёт блоку стать шире родителя, vh-100 и min-vh-100 растягивают блок на всю высоту окна. Класс min-vh-100 обычно ставят на обёртку страницы админ-панели, чтобы боковое меню тянулось до низа.
Позиционирование
Классы position-relative и position-absolute вместе с top-*, start-*, end-*, bottom-* (значения 0, 50 и 100 процентов) размещают элемент относительно родителя:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="position-relative border rounded p-4 mt-2" style="width: 180px">
Входящие
<span class="position-absolute top-0 start-100 translate-middle bg-danger text-white rounded-pill px-2">
5
</span>
</div>Красный кружок с числом сидит на правом верхнем углу блока: top-0 start-100 ставит его в угол, а translate-middle сдвигает на половину его размера, чтобы центр совпал с углом.
Закреплённые блоки
fixed-top закрепляет элемент вверху окна поверх содержимого, sticky-top прилипает к верху при прокрутке, но сначала стоит на своём месте. Оба класса часто ставят на шапку сайта.
Частая ошибка
Ставить position-absolute на элемент, забыв position-relative у родителя. Тогда элемент отсчитывает координаты от ближайшего позиционированного предка или от всей страницы и улетает в угол экрана. Всегда задавайте родителю position-relative.