---
status: seed
type: concept
tags:
- bootstrap
- web-development
- css-framework
- grid-system
created: 2026-05-30
updated: 2026-05-30
source:
- '[[21-bootstrap-1.pdf]]'
aliases:
- Основы Bootstrap
---
# Bootstrap 5
**Bootstrap** — популярный HTML/CSS/JS фреймворк для быстрой разработки адаптивных интерфейсов.
## Быстрый старт
Для использования через CDN добавьте в ``:
```html
```
И скрипты перед ``:
```html
```
## Контрольные точки (Breakpoints)
- **X-Small (`<576px`)**: по умолчанию.
- **Small (`sm` ≥576px)**.
- **Medium (`md` ≥768px)**.
- **Large (`lg` ≥992px)**.
- **Extra large (`xl` ≥1200px)**.
- **Extra extra large (`xxl` ≥1400px)**.
## Сетка (Grid System)
Базируется на Flexbox и состоит из контейнеров, строк и колонок (12 колонок в ряду).
```html
```
- `.container`: фиксированная ширина (меняется на брейкпоинтах).
- `.container-fluid`: всегда 100% ширины.
- `.row`: обертка для колонок.
- `.col-{breakpoint}-{size}`: настройка ширины колонки.
## Основные классы-утилиты
- **Отступы:** `m-3` (margin), `p-2` (padding), `mt-1` (margin-top).
- **Цвета:** `text-primary`, `bg-dark`, `btn-success`.
- **Типографика:** `h1`, `display-1`, `text-center`, `fw-bold`.
- **Flexbox:** `d-flex`, `justify-content-between`, `align-items-center`.
## Компоненты
Bootstrap предоставляет готовые стили для:
- Кнопок (`btn`), форм, навигационных панелей (`navbar`).
- Карточек (`card`), алертов (`alert`), модальных окон.
- Пагинации, списков, таблиц.