とほほのBootstrap 4入門

トップ > Bootstrap 4入門 > バッジ

バッジ

.badge, .badge-* はバッジを表示します。

Sample
Primary Secondary Success Danger Warning Info Light Dark
Code
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning;</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

下記の様に、ボタンの中にバッチを表示することもできます。

Sample
Code
<button type="button" class="btn btn-primary">
  Members <span class="badge badge-light">9</span>
</button>

ピルバッジ

.badge-pill は、角の丸いバッジを表示します。

Sample
Primary Secondary Success Danger Warning Info Light Dark
Code
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning;</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

.badge-* を <a> 要素に対して使用すると、クリック可能なバッチとなり、マウスを乗せた際の色も変わります。

Sample
Primary Secondary Success Danger Warning Info Light Dark
Code
<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning;</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>
Copyright (C) 2015-2019 杜甫々
初版:2015年9月6日 最終更新:2019年1月6日
http://www.tohoho-web.com/bootstrap/badge.html