【Bootstrap5】Badgeの使い方・カスタマイズ例について

皆さんこんにちは。いし(@ishilog2)です。

今回はBootstrap5のBadgeの使い方についてご紹介します。

基本の使い方

https://getbootstrap.jp/docs/5.0/components/badge/
基本の使い方では公式の内容を記載しております。

サイズを見出しに合わせる

See the Pen
Untitled by ISHI (@ishi-log)
on CodePen.

ボタンの中に設置する

See the Pen
Untitled by ISHI (@ishi-log)
on CodePen.

色を変える

See the Pen
Untitled by ISHI (@ishi-log)
on CodePen.

丸みを帯びたデザインに

See the Pen
Untitled by ISHI (@ishi-log)
on CodePen.

カスタマイズ例

Badgesを好きな色に変更する

See the Pen
Untitled by ISHI (@ishi-log)
on CodePen.

Badges in Badge

See the Pen
Untitled by ISHI (@ishi-log)
on CodePen.

Badgesにhref属性をつける

spanタグをaタグにすることでhref属性をつけることが出来ます。

See the Pen
Untitled by ISHI (@ishi-log)
on CodePen.