とほほのBootstrap 4入門

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

バッジ

バッジ

.badge, .badge-{value} はバッジを表示します。

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>

ピルバッジ

.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-pill<a> 要素に対して使用すると、クリック可能なボタンとなり、マウスを乗せた際の色も変わります。

Sample
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-2018 杜甫々
初版:2015年9月6日 最終更新:2018年6月17日
http://www.tohoho-web.com/bootstrap/alert.html