Bootstrap 4 的徽章（Badges）组件是一种小型的用于计数和打标签的组件。徽章组件通过使用相对字体大小和 em 单位来实现缩放，以匹配其直接父元素的大小。这意味着徽章可以根据父元素的大小变化而变化，提供了很好的灵活性。
在 Bootstrap 4 中，创建徽章非常简单。只需要将 .badge 类加上带有指定意义的颜色类（如 .badge-secondary）添加到 <span> 元素上即可。例如，要创建一个次要颜色的徽章，可以使用 <span class="badge badge-secondary">New</span>。
徽章组件可以作为链接或按钮的一个组成部分，以提供计数功能。例如，在一个按钮内部使用徽章来显示通知数量：
html
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>Bootstrap 4 还支持药丸形状的徽章。要创建药丸形状的徽章，只需要在徽章类中添加 .badge-pill 类。例如，<span class="badge badge-pill badge-primary">主要</span>。
值得注意的是，徽章组件可能会给使用屏幕阅读器及类似辅助技术的用户带来困惑。虽然徽章通过样式传达了有关其用途的视觉提示，但视觉受限的用户则只能获取到徽章组件内所包含的文本内容。因此，在使用徽章时，需要考虑上下文是否清晰，以便这些用户能够正确理解徽章的含义。
以下是一些徽章的颜色类型示例：
- 主要：
<span class="badge badge-primary">主要</span> - 次要：
<span class="badge badge-secondary">次要</span> - 成功：
<span class="badge badge-success">成功</span> - 危险：
<span class="badge badge-danger">危险</span> - 警告：
<span class="badge badge-warning">警告</span> - 信息：
<span class="badge badge-info">信息</span> - 浅色：
<span class="badge badge-light">浅色</span> - 深色：
<span class="badge badge-dark">深色</span>
这些徽章可以根据需要应用于不同的元素和场景中，以增强用户界面的视觉效果和功能性【0†source】【1†source】【2†source】【3†source】。