Классы значков Bootstrap можно использовать для выделения дополнительной информации, которая добавляется к строке текста. Для создания значка примените класс .badge, а также один из классов .badge-* к элементу <span>, представляющему значок.
Пример
Здесь мы создаём значок по умолчанию с помощью class="badge badge-primary".
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<h3>25 советов по завязыванию шнурков <span class="badge badge-primary">Новое</span></h3>
Контекстные классы
Следующие контекстные классы доступны для значков.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<span class="badge badge-primary">Главный</span>
<span class="badge badge-success">Успех</span>
<span class="badge badge-info">Информация</span>
<span class="badge badge-warning">Предупреждение</span>
<span class="badge badge-danger">Опасность</span>
<span class="badge badge-light">Светлый</span>
<span class="badge badge-dark">Тёмный</span>
Значки в виде пилюль
Сделайте уголки скруглёнными через класс .badge-pill.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<span class="badge badge-pill badge-primary">Главный</span>
<span class="badge badge-pill badge-success">Успех</span>
<span class="badge badge-pill badge-info">Информация</span>
<span class="badge badge-pill badge-warning">Предупреждение</span>
<span class="badge badge-pill badge-danger">Опасность</span>
<span class="badge badge-pill badge-light">Светлый</span>
<span class="badge badge-pill badge-dark">Тёмный</span>
Новое в Bootstrap 4
Bootstrap 3 использует метки и значки, каждый для своих собственных целей. В Bootstrap 4 значки делают то же, что и метки из Bootstrap 3. Bootstrap 4 также представил класс .badge-pill для создания скруглённых уголков.