Заголовки значков Bootstrap 5

Заголовки значков можно использовать для маркировки последней информации о заголовках. Размер значков масштабируется в соответствии с размером заголовка. Он просто соответствует размеру родительского элемента (использует относительные единицы). Таким образом, вы можете напрямую использовать класс значка внутри любого тега (например, span), родительским элементом которого является тег заголовка. Если вам нужен какой-либо определенный цвет для значка, вы можете использовать контекстные классы.

Класс заголовков Badges: для заголовка Badge нет класса, нам просто нужно использовать класс badge для элементов заголовка.

Синтаксис:

<h1> ...
    <span class="badge ...">...</span>
</h1>

Пример ниже иллюстрирует заголовки значков Bootstrap 5:

Пример 1: Здесь, в этом примере, вы можете видеть, что мы использовали класс значка внутри тега span, чьим родительским элементом являются теги заголовков. Кроме того, мы использовали класс цвета фона bg-primary, чтобы вы могли видеть значок.

Выход:

Пример 2. Цвет фона значков заголовков можно изменить с помощью контекстных классов вместе с классом значков.

Выход:

Ссылка : https://getbootstrap.com/docs/5.0/components/badge/#headings