Bootstrap требует наличия элемента контейнера для хранения элементов и поддержки своей системы сеток (подробнее о ней далее). Классы контейнеров Bootstrap были созданы специально для этой цели.
Bootstrap 5 включает три разных типа контейнеров:
- Фиксированный
- Гибкий
- Адаптивный
Фиксированные контейнеры
Фиксированный контейнер — это адаптивный контейнер фиксированной ширины. При изменении размеров браузера его ширина остается неизменной, пока он не пройдёт определенную контрольную точку (указанную вами — подробнее об этом далее), после чего контейнер изменит размер до новой ширины для этой контрольной точки.
<!DOCTYPE html>
<title>Мой пример</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style>
body {
padding-top: 1em;
}
</style>
<div class="container">
Пример контейнера фиксированной ширины, который устанавливается с помощью класса <code>.container</code>.
</div>
<style>
.container {
background: yellowgreen;
text-align: center;
padding-top: 150px;
padding-bottom: 150px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</script>
Гибкие контейнеры
Гибкий контейнер занимает всю ширину области просмотра. Он будет плавно расширяться и сжиматься при изменении размеров браузера. Это поведение отличается от контейнера с фиксированной шириной, который «прыгает» к новому размеру, когда вы проходите заданную контрольную точку.
<!DOCTYPE html>
<title>Мой пример</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style>
body {
padding-top: 1em;
}
</style>
<div class="container-fluid">
Пример гибкого контейнера, который устанавливается с помощью класса <code>.container-fluid</code>.
</div>
<style>
.container-fluid {
background: yellowgreen;
text-align: center;
padding-top: 150px;
padding-bottom: 150px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</script>
Адаптивные контейнеры
Адаптивные контейнеры позволяют задать класс, который будет иметь ширину 100% до достижения указанной контрольной точки. Вы указываете такую точку, добавляя её к классу контейнера (например, container-lg, чтобы сделать контейнер шириной 100% до контрольной точки large). Контрольной точкой может быть любое из следующих значений: sm, md, lg, xl и xxl.
<!DOCTYPE html>
<title>Мой пример</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style>
body {
padding-top: 1em;
}
</style>
<div class="container-lg">
Пример адаптивного контейнера, который устанавливается с помощью класса <code>.container-lg</code>.
</div>
<style>
.container-lg {
background: yellowgreen;
text-align: center;
padding-top: 150px;
padding-bottom: 150px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</script>
Хотя вы можете создавать страницы Bootstrap без контейнеров, они необходимы при использовании системы сеток Bootstrap.