1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. Bootstrap
  6. »
  7. 【Bootstrap 4】badgeを使ってテキスト横に小さな文字を入れる方法

【Bootstrap 4】badgeを使ってテキスト横に小さな文字を入れる方法

前にBootStrap4の記事を書いていましたが、日にちが空いてしまいましたね。@It_is_Rです。

前回は全体的な機能とアラートの使い方を紹介しました。
今回はバッジの使い方を紹介していきたいと思います。

バッジ ( badge )

バッジは、テキストなどの横に、小さな文字や数字をつけます。
バッジをつけるときは、spanタグを使用します。

例えば、タイトルの横にカテゴリーを入れたい場合や、カテゴリーの横に投稿数を入れたい場合です。

<h1 href="#">ケーキの焼き方 <span class="badge badge-primary">デザート</span></h1>
<a href="#">デザート <span class="badge badge-secondary">5</span></a>

背景色の変更

以下のように、「badge-primary」「badge-secondary」などと組み合わせることで、背景色の指定ができます。

<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-danger">danger</span>
<span class="badge badge-warning">warning</span>
<span class="badge badge-info">info</span>
<span class="badge badge-light">light</span>
<span class="badge badge-dark">dark</span>

角丸

「badge-pill」を使うことで、角をより丸く変更することもできます。

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

リンク

aタグでリンクにすることによって、カーソルを乗せた時に色が変わるようにもなります。

<a href="#" class="badge badge-primary">primary</span>
<a href="#" class="badge badge-secondary">secondary</span>
<a href="#" class="badge badge-success">success</span>
<a href="#" class="badge badge-danger">danger</span>
<a href="#" class="badge badge-warning">warning</span>
<a href="#" class="badge badge-info">info</span>
<a href="#" class="badge badge-light">light</span>
<a href="#" class="badge badge-dark">dark</span>

まとめ

バッジを使うとテキストの横に小さな文字や数字を入れることができます。
今回紹介したように、ものすごく簡単に実装できてしまいます。Bootstrapを使っているなら一度はやってみたい実装ですね。

今回はBootstrap4でのバッジの使い方でした。
気になる方はぜひ試してみてください。

参考サイト

参考サイト : Bootstrap 公式ページ

この企画の一覧はこちら

  1. Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。
  2. 【 Bootstrap 4 】全体的な機能の解説と、Alert の使い方。
  3. 【Bootstrap 4】badgeを使ってテキスト横に小さな文字を入れる方法
  4. 【Bootstrap 4】パンくずリスト(Breadcrumb)を作ってみよう!
  5. 【Bootstrap 4】ボタン(btn)の作り方。色やサイズなどの指定方法!
  6. 【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法
  7. 【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方

スポンサードリンク

関連コンテンツ

オススメ記事

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。背景を変更する。

三度の飯よりも好きなものが多すぎて比較にならない@It_is_Rです。 FC2ブログ"最強"カスタマイズ入門講座の続きですね。最強にカスタマイズしていきましょう。 今回は背景色の変更をメインに

【 Bootstrap 4 】全体的な機能の解説と、Alert の使い方。

頭がお花畑の@It_is_Rです。 今回からは Bootstrap 4 の使い方について、詳しく書いていこうと思います。 このシリーズの、前回の記事はこちらです。 Bootstrap 4 を

WordPress テーマ自作 | functions.php から CSS を読み込む方法。

ふぁ……ふぁ……、ファンクションッ!! あ、どうも@It_is_Rです。 なに笑ってるんですか? WordPress テーマ自作シリーズ第10回目です。 今回は、 functions.php

WordPress

無料で広告なしのWordPressサイトを立ち上げる方法。

猫を飼っています。でも犬派です。何か文句ありますか? …まぁ、最終的に動物全般が好きなんです。爬虫類から哺乳類、鳥類まで好きです。動物を飼っている人、今すぐ写真を@It_is_Rに送り付けて下さい。

【 gulp 】 超便利! Sass で Normalize.css などをインポートする方法。

ふと立ち上がった瞬間に、ホットマットを猫に奪われる@It_is_Rです。 全然どいてくれない。 今回は gulp を使って、 Sass ファイルから Normalize.css などをインポー

zsh

zsh のインストール方法と、うまく起動しない時の対処法。

かっこいいものが大好きな@It_is_Rです。 そこで今回は、ターミナルをかっこよくする為の方法を、何回かの記事に分けて書いてみたいと思います。 今回、第一回目は zsh ( Z Shell

WordPress | ツイート数やシェア数付きのSNSシェアボタンを自作しよう!

最近SNSシェアボタンを作り直した@It_is_Rです。 せっかく作ったんだから、シェアするのだよ、みんな。 そこで今回は、Twitter や Facebook、GooglePlus、はてな

【Android Studio】新規プロジェクトを作成する方法。

インスタント焼きそばを作ろうとすると、なぜか焼うどんになります。 @It_is_R です。 しかも、ラーメン作ろうと思うと焼きそばができあがります。 前回、 Android Studio のイ

【Gitの使い方 – その1】GitHubのアカウントを取得する方法!

Gitを使うとバージョン管理が簡単になりますが、それ以前に自分の頭の中を管理するのが大変な@It_is_Rです。 Gitの使い方をいくつかの記事に分けて紹介していきたいと思います。 まず今回は

WordPressカスタムヘッダーを完璧に使いこなしたい人へ告ぐ!

森の中に昔から住んでる@It_is_Rです。 WordPressのカスタマイズをする上で、カスタムヘッダーを使うと、色やヘッダー画像をWordPressの管理画面から操作できるようになり便利です

コメントをどうぞ!

メールアドレスが公開されることはありません。