Bootstrap3を使っていた私がBootstrap4をいじって困ったこと：labelクラスが効かない！？

2017年7月20日2017年10月12日

最近購入したテンプレートが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の公式サイトにアクセスします。
そして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>

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

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

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>

よかったらシェアしてね！