Bootstrap 5: Утилиты


Оглавление

    Показать оглавление

Утилиты/Вспомогательные классы

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>

Флоат и Clearfix

Переместите элемент вправо с помощью класса .float-end или влево с помощью .float-start и очищайте числа с плавающей запятой с помощью класса .clearfix:

Пример

Float left Float right
<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 пикселей) )):

Пример

Float right on small screens or wider

Float right on medium screens or wider

Float right on large screens or wider

Float right on extra large screens or wider

Float right on XXL screens or wider

Float none
<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):

Пример

Centered
<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):

Пример

Width 25%
Width 50%
Width 75%
Width 100%
Auto Width
Max Width 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):

Пример

Height 25%
Height 50%
Height 75%
Height 100%
Auto Height
Max Height 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 — устанавливает для поля значение авто.

Пример

I only have a top padding (1.5rem)
I have a padding on all sides (3rem)
I have a margin on all sides (3rem) and a bottom padding (3rem)
<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-, чтобы добавить тени к элементу:

Пример

No shadow
Small shadow
Default shadow
Large 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 и ячеек таблицы):

Пример

baseline top middle bottom text-top text-bottom
<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:

Пример

I am visible
     <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">&amp;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 &quot;meaning through colors&quot;:</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 &quot;meaning through colors&quot;.</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>