Класи піктограм 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 для створення округлених куточків.