Классы значков Bootstrap можно использовать для выделения дополнительной информации, добавляемой к текстовой строке.
Чтобы создать значок, примените класс .badge, а также один из контекстных классов .bg-* к элементу <span>, представляющему значок.
Пример
Здесь мы создаём значок по умолчанию, используя class="badge badge-primary".
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<h3>Смотрите, вот это значок… <span class="badge bg-primary">Новое</span></h3>
Контекстные классы
Для значков доступны следующие контекстные классы.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<span class="badge bg-primary">Основной</span>
<span class="badge bg-success">Успех</span>
<span class="badge bg-info">Инфо</span>
<span class="badge bg-warning">Предупреждение</span>
<span class="badge bg-danger">Опасность</span>
<span class="badge bg-light">Светлый</span>
<span class="badge bg-dark">Тёмный</span>
Значки в виде таблетки
Сделайте углы более закругленными с помощью класса .badge-pill.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<span class="badge rounded-pill bg-primary">Основной</span>
<span class="badge rounded-pill bg-success">Успех</span>
<span class="badge rounded-pill bg-info">Инфо</span>
<span class="badge rounded-pill bg-warning">Предупреждение</span>
<span class="badge rounded-pill bg-danger">Опасность</span>
<span class="badge rounded-pill bg-light">Светлый</span>
<span class="badge rounded-pill bg-dark">Тёмный</span>