おはようございます！社員Aです👩

連載しております「Bootstrapシリーズ」ですが、第6回目になりました！

Bootstrap4基本の使い方シリーズ

複数記事に分けてWEB制作でよく使うBootstrapの機能や意外と知られていない便利な機能なども紹介していきますので、初めてBootstrapにチャレンジされる方も、既にBootstrapを使って開発をされている方にも読んでいただけると嬉しいです。

第6回目の今回は「バッジ編」！Bootstrap4でバッジを設定する方法を解説していきたいと思います。Webデザイン初心者の方でも簡単に使えるので、ぜひこの機会にBootstrap4の使いかたをマスターしてみませんか？

Bootstrap4 バッジ

Bootstrap4では、クラスを付与することで、バッジを設定することができます。

基本のルールについて

• span要素に「badge」クラスと、「badge-xx」のクラスを付与して使います。

表示

見出し New

設定

<h1>見出し <span class="badge badge-secondary">New</span></h1>

バッジの色

「badge」クラスに加え、「badge-xx」のクラスを付与することでバッジの色を変更することができます。

表示

設定

<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-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

ピルバッジの設定

「badge」クラスに、「badge-pill」を同時に付与することでより丸いバッジを設定することができます。

表示

Primary

設定

<span class="badge badge-primary badge-pill ">Primary</span>

リンクバッジの設定

a要素に「.badge」クラスを付与すると、バッジにリンクを付けることができます。

表示

Primary

設定

<a class="badge badge-primary" href="#">Primary</a>

まとめ

今回はバッジ編ということで、様々なカラーバッジの設定方法をご紹介しました。

クラス付与だけで、バッジが作れるのでちょっとしたときにも活用できそうですね！