Bootstrap3を使っていた私がBootstrap4をいじって困ったこと:labelクラスが効かない!?

最近購入したテンプレートがbootstrap4をベースに作られていたのでいじり始めました。
一部3とは勝手が違っていたので、ハマったところを紹介していきます。
今回は「labelクラスが効かない!?」編です。

現象の確認と対応

まずは現象を確認

まずは従来のHTMLを記述します。

<p>テスト<span class="label label-danger">21</span></p>
<p>テスト<span class="label label-info">22</span></p>

Bootstrap3までなら画像のような表示になります。
では上記の記述をBootstrap4で確認してみると・・・

あれ!?labelクラスが効いてない!?

Bootstrap4の公式サイトを確認してみる


Bootstrap4の公式サイトにアクセスします。
そしてDocumentation>右メニューのcomponentsを確認してみるとlabelが消えていることが確認できます。
探してみると「Badges」が今までの「label」に該当します。

記述を変更

では、さっそく上記の記述を変更します。
class=”label label-danger”をclass=”badge badge-danger”へ、
class=”label label-info”をclass=”badge badge-info”に変更します。

<p>テスト<span class="badge badge-danger">21</span></p>
<p>テスト<span class="badge badge-info">22</span></p>

では実際に確認してみます。

これで予想どおり表示されたはずです。

補足:Bootstrap3までのbadgeを再現する場合は「badge badge-pill」と書く

Bootstrap4ではclass=”badge badge-pill”と書くとBootstrap3のbadgeと同じ表示がされます。
またBootstrap3では廃止されていた色指定が復活しました。

<p>テスト<span class="badge badge-pill badge-danger">21</span></p>
<p>テスト<span class="badge badge-pill badge-info">22</span></p>