目次

1. バッジ
2. コンテキストバッジ
3. カプセルバッジ
4. 要素内のバッジ

バッジ

バッジ (Badges) は、コンテンツに追加情報を追加するために使用されます。

<span> 要素の .badge クラスを .bg-secondary などのコンテキスト クラスとともに使用して、長方形を作成します。バッジ。 バッジは、親要素 (存在する場合) のサイズに合わせて拡大縮小されることに注意してください。

例

<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>

コンテキストバッジ

バッジの色を変更するには、任意のコンテキスト クラス (.bg-*) を使用してください。

例

<span class="badge bg-primary">主要</span>
<span class="badge bg-secondary">二次的</span>
<span class="badge bg-success">成功</span>
<span class="badge bg-danger">危険</span>
<span class="badge bg-warning">警告</span>
<span class="badge bg-info">情報</span>
<span class="badge bg-light">明色</span>
<span class="badge bg-dark">暗色</span>

カプセルバッジ

.rounded-pill クラスを使用してバッジを丸くします。

例

<span class="badge rounded-pill bg-primary">主要</span>
<span class="badge rounded-pill bg-secondary">二次的</span>
<span class="badge rounded-pill bg-success">成功</span>
<span class="badge rounded-pill bg-danger">危険</span>
<span class="badge rounded-pill bg-warning">警告</span>
<span class="badge rounded-pill bg-info">情報</span>
<span class="badge rounded-pill bg-light">明色</span>
<span class="badge rounded-pill bg-dark">暗色</span>

要素内のバッジ

ボタン内でバッジを使用する例:

例

<button type="button" class="btn btn-primary">
  情報 <span class="badge bg-danger">4</span>
</button>