最終更新日: 2021年1月17日
Bootstrapのlabelの色を変更する方法を紹介！
この記事ではBootstrapのlabel(badge)の色を変更する方法を紹介しています。Bootstrap4ではlabelがbadgeになり使い方が少し違うので、自分の使っているバージョンに合ったやり方を参照して色を変更してください！
Bootstrapのlabelの色を変更する方法
Boostrap3の場合
labelの色を変更するには、.labelクラスと.label-*クラスを使用します。
*の部分に入る色の名前と見た目は以下のようになります。
Bootstrap4の場合
Bootstrap4では、labelクラスはbadgeクラスに変更になりました。
.badgeクラスと.badge-*クラスを使うことで、同様に色を指定できます。
*に入る色の名前と見た目の組み合わせは以下のようになります。labelの時と色が変わっているものもあります。
label(badge)をカスタマイズする
他にもカスタマイズできるものがいくつかあります。
(badgeを用いて説明していきます。）
.badge-pill
.badge-pillを適用すると丸みをおびたバッジを作成できます。
Link
a要素に.badgeクラスを適用すると、マウスをホバーしたときにフォーカスすることができます。
色に関するクラスは以下の記事でも紹介しています。
