Бadge Bootstrap 5

Значки

Значки (Badges) используются для добавления дополнительной информации к содержимому:

в <span> в элементах с использованием .badge классы и контекстные классы (например .bg-secondary) чтобы создать прямоугольные значки. Обратите внимание, что значки будут масштабироваться, чтобы соответствовать размеру родительского элемента (если есть):

Пример

<h1>Пример заголовка <span class="badge bg-secondary">Новое</span></h1>
<h2>Пример заголовка <span class="badge bg-secondary">Новое</span></h2>
<h3>Пример заголовка <span class="badge bg-secondary">Новое</span></h3>
<h4>Пример заголовка <span class="badge bg-secondary">Новое</span></h4>
<h5>Пример заголовка <span class="badge bg-secondary">Новое</span></h5>
<h6>Пример заголовка <span class="badge bg-secondary">Новое</span></h6>

Попробуйте сами

Контекстные значки

Используйте любую контекстную классу (.bg-*) Измените цвет значков:

Пример

<span class="badge bg-primary">Основной</span>
<span class="badge bg-secondary">Второстепенный</span>
<span class="badge bg-success">Успех</span>
<span class="badge bg-danger">Опасный</span>
<span class="badge bg-warning">Предупреждающий</span>
<span class="badge bg-info">Информационный</span>
<span class="badge bg-light">Светлый</span>
<span class="badge bg-dark">Тёмный</span>

Попробуйте сами

Капсульные значки

Использование .rounded-pill Класс делает значки более圆润ыми:

Пример

<span class="badge rounded-pill bg-primary">Основной</span>
<span class="badge rounded-pill bg-secondary">Второстепенный</span>
<span class="badge rounded-pill bg-success">Успешный</span>
<span class="badge rounded-pill bg-danger">Опасный</span>
<span class="badge rounded-pill bg-warning">Предупреждающий</span>
<span class="badge rounded-pill bg-info">Информационный</span>
<span class="badge rounded-pill bg-light">Светлый</span>
<span class="badge rounded-pill bg-dark">Тёмный</span>

Попробуйте сами

Значок в элементе

Пример использования значков внутри кнопки:

Пример

<button type="button" class="btn btn-primary">
  Сообщение <span class="badge bg-danger">4</span>
</button>

Попробуйте сами