Bootstrap 5 имеет множество служебных/вспомогательных классов для быстрого стилизации элементов без использования кода CSS.
Используйте классы border, чтобы добавить или удалить границы элемента:
<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-end-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-start-0"></span>
<br>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>Попробуйте сами →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
span {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="container mt-3">
<h2>Borders</h2>
<p>Use the border classes to add or remove borders from an element:</p>
<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-end-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-start-0"></span>
<br>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>
</div>
</body>
</html>
Используйте .border-1 для .border-5, чтобы изменить ширину границы:
<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>Попробуйте сами →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
span {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="container mt-3">
<h2>Border Width</h2>
<p>Use .border-1 to .border-5 to change the width of the border:</p>
<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>
</div>
</body>
</html>
Добавьте цвет к границе с помощью любого из контекстных классов цвета границы:
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>Попробуйте сами →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.border {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
}
</style>
</head>
<body>
<div class="container mt-3">
<h2>Borders</h2>
<p>Use a contextual border color to add a color to the border:</p>
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
</div>
</body>
</html>
Добавьте закругленные углы к элементу с помощью классов rounded:
<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>
<span class="rounded-4"></span>
<span class="rounded-5"></span>Попробуйте сами →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
span {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
background-color: #555;
}
</style>
</head>
<body>
<div class="container mt-3">
<h2>Borders</h2>
<p>Round the corner of an element with the rounded classes:</p>
<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
<br>
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>
<span class="rounded-4"></span>
<span class="rounded-5"></span>
</div>
</body>
</html>
Переместите элемент вправо с помощью класса .float-end или влево с помощью .float-start и очищайте числа с плавающей запятой с помощью класса .clearfix:
<div class="clearfix">
<span class="float-start">Float left</span>
<span class="float-end">Float right</span>
</div>Попробуйте сами →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Float</h2>
<p>Float an element to the right with the .float-end class or to the left with .float-start, and clear floats with the .clearfix class.</p>
<div class="clearfix">
<span class="float-start">Float left</span>
<span class="float-end">Float right</span>
</div>
</div>
</body>
</html>
Перемещайте элемент влево или вправо в зависимости от ширины экрана с помощью адаптивных классов плавающих элементов (.float-*-start|end - где * — sm (>=576px), md (>=768px), lg (>=992 пикселей), xl (>=1200 пикселей) или xxl (>=1400 пикселей) )):
<div class="float-sm-end">Float right on small screens or wider</div><br>
<div class="float-md-end">Float right on medium screens or wider</div><br>
<div class="float-lg-end">Float right on large screens or wider</div><br>
<div class="float-xl-end">Float right on extra large screens or wider</div><br>
<div class="float-xxl-end">Float right on XXL screens or wider</div><br>
<div class="float-none">Float none</div>Попробуйте сами →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Responsive Floats</h2>
<p>Float an element to the left or to the right depending on screen width, with the responsive float classes .float-*-left|right (where * is sm, md, lg, xl or xxl).</p>
<p>Resize the browser window to see the effect.</p>
<div class="clearfix">
<div class="float-sm-end">Float right on small screens or wider</div><br>
<div class="float-md-end">Float right on medium screens or wider</div><br>
<div class="float-lg-end">Float right on large screens or wider</div><br>
<div class="float-xl-end">Float right on extra large screens or wider</div><br>
<div class="float-xxl-end">Float right on XXL screens or wider</div><br>
<div class="float-none">Float none</div>
</div>
</div>
</body>
</html>
Центрируйте элемент с помощью класса .mx-auto (добавляет margin-left и margin-right: auto):
<div class="mx-auto bg-warning" style="width:150px">Centered</div>Попробуйте сами →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Horizontal Centering</h1>
<p>Center an element with the .mx-auto class:</p>
<div class="mx-auto bg-warning" style="width:150px">Centered</div>
</div>
</body>
</html>
Установите ширину элемента с помощью классов w-* (.w-25, .w-50 , .w-75, .w-100, . w-auto и .mw-100):
<div class="w-25 bg-warning">Width 25%</div>
<div class="w-50 bg-warning">Width 50%</div>
<div class="w-75 bg-warning">Width 75%</div>
<div class="w-100 bg-warning">Width 100%</div>
<div class="w-auto bg-warning">Auto Width</div>
<div class="mw-100 bg-warning">Max Width 100%</div>Попробуйте сами →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Width Utilities</h1>
<p>Set the width of an element with the w-* classes:</p>
<div class="w-25 bg-warning">Width 25%</div>
<div class="w-50 bg-warning">Width 50%</div>
<div class="w-75 bg-warning">Width 75%</div>
<div class="w-100 bg-warning">Width 100%</div>
<div class="w-auto bg-warning">Auto Width</div>
<div class="mw-100 bg-warning">Max Width 100%</div>
</div>
</body>
</html>
Установите высоту элемента с помощью классов h-* (.h-25, .h-50 , .h-75, .h-100, . h-auto и .mh-100):
<div style="height:200px;background-color:#ddd">
<div class="h-25 bg-warning">Height 25%</div>
<div class="h-50 bg-warning">Height 50%</div>
<div class="h-75 bg-warning">Height 75%</div>
<div class="h-100 bg-warning">Height 100%</div>
<div class="h-auto bg-warning">Auto Height</div>
<div class="mh-100 bg-warning" style="height:500px">Max Height 100%</div>
</div>Попробуйте сами →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Height Utilities</h1>
<p>Set the height of an element with the h-* classes:</p>
<div style="height:200px;background-color:#ddd">
<div class="h-25 d-inline-block p-2 bg-warning">Height 25%</div>
<div class="h-50 d-inline-block p-2 bg-warning">Height 50%</div>
<div class="h-75 d-inline-block p-2 bg-warning">Height 75%</div>
<div class="h-100 d-inline-block p-2 bg-warning">Height 100%</div>
<div class="h-auto d-inline-block p-2 bg-warning">Auto Height</div>
<div class="mh-100 d-inline-block p-2 bg-warning" style="height:500px">Max Height 100%</div>
</div>
</div>
</body>
</html>
Bootstrap 5 имеет широкий спектр адаптивных классов полей и отступов. Они работают для всех точек останова: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200 пикселей) или xxl (>=1400 пикселей)):
Классы используются в формате: {property}{sides}-{size для xs и < code class="w3-codespan">{property}{sides}-{breakpoint}-{size для sm, md, lg, xl и xxl.
Где property — одно из:
m — устанавливает поле
p - устанавливает отступы
Где стороны - это одно из:
t — устанавливает margin-top или padding-top
b - устанавливает margin-bottom или padding-bottom
s — устанавливает левое поле или левое отступы
e — устанавливает правое поле или правое отступы
x — устанавливает как padding-left, так и padding-right или поле слева и поле справа
y — устанавливает как padding-top, так и padding-bottom или поле сверху и поле снизу
пусто — устанавливает поле или отступ на всех 4 сторонах элемента.
Где размер — одно из:
0 - устанавливает для поля или отступ равным < класс кода="w3-codespan">0
1 - устанавливает поля или отступ равным < класс кода="w3-codespan">.25rem
2 - устанавливает для поля или отступ равным < класс кода="w3-codespan">.5rem
3 — устанавливает поля или отступ равным < класс кода="w3-codespan">1rem
4 - устанавливает для поля или отступ равным < класс кода="w3-codespan">1.5rem
5 - устанавливает для поля или заполнение значением 5. класс кода="w3-codespan">3rem
auto — устанавливает для поля значение авто.
<div class="pt-4 bg-warning">I only have a top padding (1.5rem)</div>
<div class="p-5 bg-success">I have a padding on all sides (3rem)</div>
<div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem) and a bottom padding (3rem)</div>Попробуйте сами →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Spacing Utilities</h1>
<p>Set the spacing of an element with the {property}{sides}-{breakpoint}-{size} classes. Omit breakpoint if you want the padding or margin to work on all screen sizes.</p>
<div class="pt-4 bg-warning">I only have a top padding (1.5rem)</div>
<div class="p-5 bg-success">I have a padding on all sides (3rem)</div>
<div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem) and a bottom padding (3rem)</div>
</div>
</body>
</html>
.m-# / m-*-#Описание: поля со всех сторон.
Попробуй
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Spacing Utilities</h1>
<p>Set the spacing of an element with the {property}{sides}-{breakpoint}-{size} classes. Omit breakpoint if you want the padding or margin to work on all screen sizes.</p>
<div class="pt-4 bg-warning">I only have a top padding (1.5rem)</div>
<div class="p-5 bg-success">I have a padding on all sides (3rem)</div>
<div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem) and a bottom padding (3rem)</div>
</div>
</body>
</html>
.mt-# / mt-*-#Описание: верхнее поле
Попробуй
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Margin Top Utilities</h1>
<div class="mt-0 bg-warning">Margin Top 0</div>
<div class="mt-1 bg-warning">Margin Top 1</div>
<div class="mt-2 bg-warning">Margin Top 2</div>
<div class="mt-3 bg-warning">Margin Top 3</div>
<div class="mt-4 bg-warning">Margin Top 4</div>
<div class="mt-5 bg-warning">Margin Top 5</div>
<div class="mt-auto bg-warning" style="width:150px">Margin Top Auto</div>
<br>
<p>Responsive margin top utilities. Resize the browser window to see the effect:</p>
<div class="mt-sm-5 bg-warning">Margin Top 5 on SM screens</div>
<div class="mt-md-5 bg-warning">Margin Top 5 on MD screens</div>
<div class="mt-lg-5 bg-warning">Margin Top 5 on LG screens</div>
<div class="mt-xl-5 bg-warning">Margin Top 5 on XL screens</div>
</div>
</body>
</html>
.mb-# / mb-*-#Описание: нижнее поле
Попробуй
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Margin Bottom Utilities</h1>
<div class="mb-0 bg-warning">Margin Bottom 0</div>
<div class="mb-1 bg-warning">Margin Bottom 1</div>
<div class="mb-2 bg-warning">Margin Bottom 2</div>
<div class="mb-3 bg-warning">Margin Bottom 3</div>
<div class="mb-4 bg-warning">Margin Bottom 4</div>
<div class="mb-5 bg-warning">Margin Bottom 5</div>
<div class="mb-auto bg-warning" style="width:150px">Margin Bottom Auto</div>
<br>
<p>Responsive margin bottom utilities. Resize the browser window to see the effect:</p>
<div class="mb-sm-5 bg-warning">Margin Bottom 5 on SM screens</div>
<div class="mb-md-5 bg-warning">Margin Bottom 5 on MD screens</div>
<div class="mb-lg-5 bg-warning">Margin Bottom 5 on LG screens</div>
<div class="mb-xl-5 bg-warning">Margin Bottom 5 on XL screens</div>
</div>
</body>
</html>
.ms-# / ms-*-#Описание: поле слева
Попробуй
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Margin Left Utilities</h1>
<div class="ms-0 bg-warning">Margin Left 0</div>
<div class="ms-1 bg-warning">Margin Left 1</div>
<div class="ms-2 bg-warning">Margin Left 2</div>
<div class="ms-3 bg-warning">Margin Left 3</div>
<div class="ms-4 bg-warning">Margin Left 4</div>
<div class="ms-5 bg-warning">Margin Left 5</div>
<div class="ms-auto bg-warning" style="width:150px">Margin Left Auto</div>
<p>Responsive margin left utilities. Resize the browser window to see the effect:</p>
<div class="ms-sm-5 bg-warning">Margin Left 5 on SM screens</div>
<div class="ms-md-5 bg-warning">Margin Left 5 on MD screens</div>
<div class="ms-lg-5 bg-warning">Margin Left 5 on LG screens</div>
<div class="ms-xl-5 bg-warning">Margin Left 5 on XL screens</div>
</div>
</body>
</html>
.me-# / me-*-#Описание: поле справа
Попробуй
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Margin Right Utilities</h1>
<div class="me-0 bg-warning">Margin Right 0</div>
<div class="me-1 bg-warning">Margin Right 1</div>
<div class="me-2 bg-warning">Margin Right 2</div>
<div class="me-3 bg-warning">Margin Right 3</div>
<div class="me-4 bg-warning">Margin Right 4</div>
<div class="me-5 bg-warning">Margin Right 5</div>
<div class="me-auto bg-warning" style="width:150px">Margin Right Auto</div>
<br>
<p>Responsive margin left utilities. Resize the browser window to see the effect:</p>
<div class="me-sm-5 bg-warning">Margin Right on SM screens</div>
<div class="me-md-5 bg-warning">Margin Right on MD screens</div>
<div class="me-lg-5 bg-warning">Margin Right on LG screens</div>
<div class="me-xl-5 bg-warning">Margin Right on XL screens</div>
</div>
</body>
</html>
.mx-# / mx-*-#Описание: поля слева и справа.
Попробуй
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Margin Left and Right Utilities</h1>
<p>Margin X utilities:</p>
<div class="mx-0 bg-warning">Margin X 0</div>
<div class="mx-1 bg-warning">Margin X 1</div>
<div class="mx-2 bg-warning">Margin X 2</div>
<div class="mx-3 bg-warning">Margin X 3</div>
<div class="mx-4 bg-warning">Margin X 4</div>
<div class="mx-5 bg-warning">Margin X 5</div>
<div class="mx-auto bg-warning" style="width:150px">Margin X Auto</div>
<br>
<p>Responsive margin x utilities. Resize the browser window to see the effect:</p>
<div class="mx-sm-5 bg-warning">Margin X 5 on SM screens</div>
<div class="mx-md-5 bg-warning">Margin X 5 on MD screens</div>
<div class="mx-lg-5 bg-warning">Margin X 5 on LG screens</div>
<div class="mx-xl-5 bg-warning">Margin X 5 on XL screens</div>
</div>
</body>
</html>
.my-# / my-*-#Описание: поля сверху и снизу
Попробуй
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Margin Top and Bottom Utilities</h1>
<p>Margin Y utilities:</p>
<div class="my-0 bg-warning">Margin Y 0</div>
<div class="my-1 bg-warning">Margin Y 1</div>
<div class="my-2 bg-warning">Margin Y 2</div>
<div class="my-3 bg-warning">Margin Y 3</div>
<div class="my-4 bg-warning">Margin Y 4</div>
<div class="my-5 bg-warning">Margin Y 5</div>
<div class="my-auto bg-warning">Margin Y Auto</div>
<br>
<p>Responsive margin y utilities. Resize the browser window to see the effect:</p>
<div class="my-sm-5 bg-warning">Margin Y 5 on SM screens</div>
<div class="my-md-5 bg-warning">Margin Y 5 on MD screens</div>
<div class="my-lg-5 bg-warning">Margin Y 5 on LG screens</div>
<div class="my-xl-5 bg-warning">Margin Y 5 on XL screens</div>
</div>
</body>
</html>
.p-# / p-*-#Описание: отступы со всех сторон.
Попробуй
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Padding Utilities</h1>
<div class="p-0 bg-warning">Padding 0</div>
<div class="p-1 bg-success">Padding 1</div>
<div class="p-2 bg-danger">Padding 2</div>
<div class="p-3 bg-primary">Padding 3</div>
<div class="p-4 bg-light">Padding 4</div>
<div class="p-5 bg-info">Padding 5</div>
<br>
<p>Responsive padding utilities. Resize the browser window to see the effect:</p>
<div class="p-sm-5 bg-warning">Padding 5 on SM screens</div>
<div class="p-md-5 bg-success">Padding 5 on MD screens</div>
<div class="p-lg-5 bg-danger">Padding 5 on LG screens</div>
<div class="p-xl-5 bg-primary">Padding 5 on XL screens</div>
</div>
</body>
</html>
.pt-# / pt-*-#Описание: верхняя часть отступа
Попробуй
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Padding Top Utilities</h1>
<div class="pt-0 bg-warning">Padding Top 0</div>
<div class="pt-1 bg-success">Padding Top 1</div>
<div class="pt-2 bg-danger">Padding Top 2</div>
<div class="pt-3 bg-primary">Padding Top 3</div>
<div class="pt-4 bg-light">Padding Top 4</div>
<div class="pt-5 bg-info">Padding Top 5</div>
<br>
<p>Responsive padding top utilities. Resize the browser window to see the effect:</p>
<div class="pt-sm-5 bg-warning">Padding Top 5 on SM screens</div>
<div class="pt-md-5 bg-success">Padding Top 5 on MD screens</div>
<div class="pt-lg-5 bg-danger">Padding Top 5 on LG screens</div>
<div class="pt-xl-5 bg-primary">Padding Top 5 on XL screens</div>
</div>
</body>
</html>
.pb-# / pb-*-#Описание: отступ снизу
Попробуй
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Padding Bottom Utilities</h1>
<div class="pb-0 bg-warning">Padding Bottom 0</div>
<div class="pb-1 bg-success">Padding Bottom 1</div>
<div class="pb-2 bg-danger">Padding Bottom 2</div>
<div class="pb-3 bg-primary">Padding Bottom 3</div>
<div class="pb-4 bg-light">Padding Bottom 4</div>
<div class="pb-5 bg-info">Padding Bottom 5</div>
<br>
<p>Responsive padding bottom utilities. Resize the browser window to see the effect:</p>
<div class="pb-sm-5 bg-warning">Padding Bottom 5 on SM screens</div>
<div class="pb-md-5 bg-success">Padding Bottom 5 on MD screens</div>
<div class="pb-lg-5 bg-danger">Padding Bottom 5 on LG screens</div>
<div class="pb-xl-5 bg-primary">Padding Bottom 5 on XL screens</div>
</div>
</body>
</html>
.ps-# / ps-*-#Описание: отступ слева
Попробуй
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Padding Left Utilities</h1>
<div class="ps-0 bg-warning">Padding Left 0</div>
<div class="ps-1 bg-success">Padding Left 1</div>
<div class="psl-2 bg-danger">Padding Left 2</div>
<div class="ps-3 bg-primary">Padding Left 3</div>
<div class="ps-4 bg-light">Padding Left 4</div>
<div class="ps-5 bg-info">Padding Left 5</div>
<br>
<p>Responsive padding left utilities. Resize the browser window to see the effect:</p>
<div class="ps-sm-5 bg-warning">Padding Left 5 on SM screens</div>
<div class="ps-md-5 bg-success">Padding Left 5 on MD screens</div>
<div class="ps-lg-5 bg-danger">Padding Left 5 on LG screens</div>
<div class="ps-xl-5 bg-primary">Padding Left 5 on XL screens</div>
</div>
</body>
</html>
.pe-# / pe-*-#Описание: отступ справа
Попробуй
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Padding Right Utilities</h1>
<div class="pe-0 bg-warning text-end">Padding Right 0</div>
<div class="pe-1 bg-success text-end">Padding Right 1</div>
<div class="pe-2 bg-danger text-end">Padding Right 2</div>
<div class="pe-3 bg-primary text-end">Padding Right 3</div>
<div class="pe-4 bg-light text-end">Padding Right 4</div>
<div class="pe-5 bg-info text-end">Padding Right 5</div>
<br>
<p>Responsive padding right utilities. Resize the browser window to see the effect:</p>
<div class="pe-sm-5 bg-warning text-end">Padding Right 5 on SM screens</div>
<div class="pe-md-5 bg-success text-end">Padding Right 5 on MD screens</div>
<div class="pe-lg-5 bg-danger text-end">Padding Right 5 on LG screens</div>
<div class="pe-xl-5 bg-primary text-end">Padding Right 5 on XL screens</div>
</div>
</body>
</html>
.py-# / py-*-#Описание: отступы сверху и снизу
Попробуй
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Padding Top and Bottom Utilities</h1>
<p>Padding y utilities:</p>
<div class="py-0 bg-warning">Padding Y 0</div>
<div class="py-1 bg-success">Padding Y 1</div>
<div class="py-2 bg-danger">Padding Y 2</div>
<div class="py-3 bg-primary">Padding Y 3</div>
<div class="py-4 bg-light">Padding Y 4</div>
<div class="py-5 bg-info">Padding Y 5</div>
<br>
<p>Responsive padding y utilities. Resize the browser window to see the effect:</p>
<div class="py-sm-5 bg-warning">Padding Y 5 on SM screens</div>
<div class="py-md-5 bg-success">Padding Y 5 on MD screens</div>
<div class="py-lg-5 bg-danger">Padding Y 5 on LG screens</div>
<div class="py-xl-5 bg-primary">Padding Y 5 on XL screens</div>
</div>
</body>
</html>
.px-# / px-*-#Описание: заполнение слева и справа.
Попробуй
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Padding Left and Right Utilities</h1>
<p>Padding x utilities:</p>
<div class="px-0 bg-warning">Padding X 0</div>
<div class="px-1 bg-success">Padding X 1</div>
<div class="px-2 bg-danger">Padding X 2</div>
<div class="px-3 bg-primary">Padding X 3</div>
<div class="px-4 bg-light">Padding X 4</div>
<div class="px-5 bg-info">Padding X 5</div>
<br>
<p>Responsive padding x utilities. Resize the browser window to see the effect:</p>
<div class="px-sm-5 bg-warning">Padding X 5 on SM screens</div>
<div class="px-md-5 bg-success">Padding X 5 on MD screens</div>
<div class="px-lg-5 bg-danger">Padding X 5 on LG screens</div>
<div class="px-xl-5 bg-primary">Padding X 5 on XL screens</div>
</div>
</body>
</html>
Используйте классы shadow-, чтобы добавить тени к элементу:
<div class="shadow-none p-4 mb-4 bg-light">No shadow</div>
<div class="shadow-sm p-4 mb-4 bg-white">Small shadow</div>
<div class="shadow p-4 mb-4 bg-white">Default shadow</div>
<div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div>Попробуйте сами →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Shadows</h1>
<p>Use the shadow- classes to to add shadows to an element:</p>
<div class="shadow-none p-4 mb-4 bg-light">No shadow</div>
<div class="shadow-sm p-4 mb-4 bg-white">Small shadow</div>
<div class="shadow p-4 mb-4 bg-white">Default shadow</div>
<div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div>
</div>
</body>
</html>
Используйте классы align- для изменения выравнивания элементов (работает только для элементов inline, inline-block, inline-table и ячеек таблицы):
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>Попробуйте сами →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Vertical Align</h1>
<p>Change the alignment of elements with the align classes (only works on inline, inline-block, inline-table and table cell elements):</p>
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>
</div>
</body>
</html>
Создавайте адаптивные видео или слайд-шоу в зависимости от ширины родительского элемента.
Добавьте класс .ratio вместе с выбранным вами соотношением сторон .ratio-* к родительскому элементу, и добавьте в него вставку (видео или iframe):
<!-- Aspect ratio 1:1 -->
<div class="ratio ratio-1x1">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<!-- Aspect ratio 4:3 -->
<div class="ratio ratio-4x3">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<!-- Aspect ratio 16:9 -->
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<!-- Aspect ratio 21:9 -->
<div class="ratio ratio-21x9">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>Попробуйте сами →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Aspect Ratio</h2>
<p>Create a responsive video and scale it nicely to the parent element.</p>
<h2>Aspect ratio 1:1</h2>
<div class="ratio ratio-1x1">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<br>
<h2>Aspect ratio 4:3</h2>
<div class="ratio ratio-4x3">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<br>
<h2>Aspect ratio 16:9</h2>
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<br>
<h2>Aspect ratio 21:9</h2>
<div class="ratio ratio-21x9">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
</body>
</html>
Используйте классы .visible или .invisible для управления видимостью элементов. Примечание. Эти классы не меняют отображаемое значение CSS. Они добавляют только visibility:visible или visibility:hidden:
<div class="visible">I am visible</div>
<div class="invisible">I am
invisible</div>Попробуйте сами →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Visibility</h1>
<p>Use the .visible or .invisible classes to control the visibility of elements. Note: These classes do not change the CSS display value. They only add visibility:visible or visibility:hidden to an element:</p>
<div class="visible bg-success">I am visible</div>
<div class="invisible bg-warning">I am invisible</div>
</div>
</body>
</html>
Используйте класс .btn-close для оформления значка закрытия. Это часто используется для оповещений и модальных окон.
<button type="button" class="btn-close"></button>Попробуйте сами →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Close Icon</h1>
<p>Use the .close class to style a close icon. This is often used for alerts and modals. Note that we use the times; symbol to create the actual icon (a better looking "x"). Also note that it is right-aligned by default:</p>
<div class="clearfix">
<button type="button" class="close">&times;</button>
</div>
</div>
</body>
</html>
Используйте класс .visually-hidden, чтобы скрыть элемент на всех устройствах, кроме программ чтения с экрана:
<span class="visually-hidden">I will be hidden on all screens except for screen readers.</span>Попробуйте сами →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Screen readers</h2>
<p>Use the .sr-only class to hide an element on all devices, except screen readers:</p>
<span class="visually-hidden">I will be hidden on all screens except for screen readers.</span>
</div>
</body>
</html>
Как описано в главе «Цвета», вот список всех классов цвета текста и фона:
Классы цветов текста:
.text-muted
.text-primary
.text-success
.text-info
.text-warning
.text-danger
.text-secondary
.text-white
.text-dark
.text-body
.text-light.text-body — это цвет тела по умолчанию (часто черный).
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Secondary text.
Dark grey text.
Body text.
Light grey text.
Попробуйте сами →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Contextual Colors</h2>
<p>Use the contextual classes to provide "meaning through colors":</p>
<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
<p class="text-info">This text represents some information.</p>
<p class="text-warning">This text represents a warning.</p>
<p class="text-danger">This text represents danger.</p>
<p class="text-secondary">Secondary text.</p>
<p class="text-dark">This text is dark grey.</p>
<p class="text-body">Default body color (often black).</p>
<p class="text-light">This text is light grey (on white background).</p>
<p class="text-white">This text is white (on white background).</p>
</div>
</body>
</html>
Контекстные текстовые классы также можно использовать в ссылках:
Попробуйте сами →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Contextual Link Colors</h2>
<a href="#" class="text-muted">Muted link.</a>
<a href="#" class="text-primary">Primary link.</a>
<a href="#" class="text-success">Success link.</a>
<a href="#" class="text-info">Info link.</a>
<a href="#" class="text-warning">Warning link.</a>
<a href="#" class="text-danger">Danger link.</a>
<a href="#" class="text-secondary">Secondary link.</a>
<a href="#" class="text-dark">Dark grey link.</a>
<a href="#" class="text-body">Body/black link.</a>
<a href="#" class="text-light">Light grey link.</a>
</div>
</body>
</html>
Вы также можете добавить 50% непрозрачности для черного или белого текста с помощью .text-black-50 или .text-white- 50 классов:
Black text with 50% opacity on white background
White text with 50% opacity on black background
Попробуйте сами →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Opacity Text Colors</h2>
<p>Add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:</p>
<p class="text-black-50">Black text with 50% opacity on white background</p>
<p class="text-white-50 bg-dark">White text with 50% opacity on black background</p>
</div>
</body>
</html>
Классы цветов фона:
bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-secondary
.bg-dark
.bg-lightПопробуйте сами →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Contextual Backgrounds</h2>
<p>Use the contextual background classes to provide "meaning through colors".</p>
<div class="bg-primary p-3"></div>
<div class="bg-success p-3"></div>
<div class="bg-info p-3"></div>
<div class="bg-warning p-3"></div>
<div class="bg-danger p-3"></div>
<div class="bg-secondary p-3"></div>
<div class="bg-dark p-3"></div>
<div class="bg-light p-3"></div>
</div>
</body>
</html>
Приведенные выше классы .bg-color не очень хорошо работают с текстом, или, по крайней мере, тогда вам придется указать правильный .text-color, чтобы получить правильный цвет текста для каждого фона.
Однако вы можете использовать классы .text-bg-color, и Bootstrap автоматически обработает соответствующий цвет текста для каждого цвета фона:
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Secondary background color.
Dark grey background color.
Light grey background color.
Попробуйте сами →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Background Color with Contrasting Text Color</h2>
<p class="text-bg-primary">This text is important.</p>
<p class="text-bg-success">This text indicates success.</p>
<p class="text-bg-info">This text represents some information.</p>
<p class="text-bg-warning">This text represents a warning.</p>
<p class="text-bg-danger">This text represents danger.</p>
<p class="text-bg-secondary">Secondary background color.</p>
<p class="text-bg-dark">Dark grey background color.</p>
<p class="text-bg-light">Light grey background color.</p>
</div>
</body>
</html>