Как использовать разные цветовые схемы для Bootstrap-бейджей?

Для использования разных цветовых схем для Bootstrap-бейджей можно применять контекстные классы. 12

Некоторые из них и соответствующие цвета:

• bg-primary — синий, для обозначения основной информации. 3
• bg-secondary — серый, для обозначения вторичной информации. 3
• bg-success — зелёный, для обозначения успешного завершения какого-либо задания. 3
• bg-danger — красный, для обозначения опасной информации. 3
• bg-warning — жёлтый, для обозначения предупреждающей информации. 3
• bg-info — светло-синий, для обозначения любой информации, которая не является важной. 3
• bg-light — светлый, для добавления светлого фона. 3
• bg-dark — тёмный, для добавления тёмного фона. 3

Чтобы добавить нужный цвет к бейджу, используют класс .badge-*, где * может быть primary, secondary, success, warning, danger и так далее. 2