Webデザイン初心者でも簡単に使える!Bootstrap4基本の使い方【バッジ編】

Bootstrap

Webデザイン初心者でも簡単に使える!Bootstrap4基本の使い方【バッジ編】

2019年02月13日 8:00 2019年09月06日

Webデザイン初心者でも簡単に使える!Bootstrap4基本の使い方【バッジ編】

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

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

Bootstrap4基本の使い方シリーズ

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

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



 

Bootstrap4 バッジ

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

基本のルールについて

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

 

表示

見出し New

 

設定

 



バッジの色

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

表示

Primary .badge-primary
Secondary .badge-secondary
Success .badge-success
Info .badge-info
Warning .badge-warning
Danger .badge-danger
Light .badge-light
Dark .badge-dark

 

設定

 

ピルバッジの設定

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

表示

Primary

 

設定

 



リンクバッジの設定

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

表示

Primary

 

設定

 

まとめ

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

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

 

関連記事

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。ブログの執筆を通じて、やっと日本語Lv.20くらいになれた気がします。 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物が好きな皆さん、小動物トークしましょう!