最近購入したテンプレートが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>
