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】記事一覧ページなどで使える「カード」の使い方
  8. 【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!

スポンサードリンク

関連コンテンツ

オススメ記事

マップ上をキャラが移動できるようにしよう!

小学生からのJavaScript。マップでキャラを動かせるようにしよう!

小学生からのプログラミング講座(こうざ)、第11弾です。 前回は、JavaScriptでのマップの作り方を紹介(しょうかい)しました。 しかし、まだマップを配置(はいち)しただけで、キャラクタ

WordPress|特定カテゴリーに属する記事を一覧表示させる方法!!

今まで、何度かに分けて書いた記事でも、その一覧がなかったので見にくいなーと思っていた@It_is_Rです。 昨日、記事の一覧表示をするショートコードを作って、記事の一覧が欲しい記事にだけ貼り付けてみ

Dockerでよく使うコマンドとオプション、その使い方を徹底解説!

人生に意味は求めない。それよりもDockerのコマンドの意味を理解する方が重要です。@It_is_Rです。 Dockerにはたくさんのコマンドがありますが、まずはよく使うコマンドを覚えていきまし

Swift

【Xcode7】Swift2でMacアプリ開発。画像を読み込む為のボタンを作る。

犬も歩けば棒にあたる。だからRは歩かない。@It_is_Rです。 最近はSwiftの記事が多いと思っている人もいるのでは無いでしょうか。実はRは現在、Swiftを使ってゲーム開発のお助けアプリを

Swift

【Xcode7】Swift2使ってみた。playgroundで遊びながら覚える。

最近は押入れの中で寝るのが日課の@It_is_Rです。 押入れは寝心地がいいです。部屋も押入れ分だけ広くなるし。 SwiftはAppleが出しているプログラミング言語です。Swiftを使うこと

キャラクター

JavaScriptマンガ風講座。初心者でも絶対に理解できる入門編!!

プログラミングは奥が深い。。。@It_is_Rです。 Flashがスマホから使えなくなり、多くのサイトにHTML5が使われ、ブラウザ上でのアニメーションはJavaScriptが多く使われるように

【Gitの使い方 – その4】ブランチを使って履歴を分岐させる方法

エビの殻や、ポテチ、煮干しなどを食べると、必ずと言っていいほど口が血だらけになります。@It_is_Rです。 さて、Gitの使い方4回目の今回は、ブランチについてです。 ブランチは作業を枝分か

HTML5とCanvasを使うべ!

小学生からのJavaScript。HTML5とCanvasを使ってみよう!

小学生からのプログラミング講座(こうざ)、第9弾です。 これまでの講座(こうざ)では、JavScriptの基本(きほん)について学び、キャラクターの操作(そうさ)ができるようになりました。 こ

zsh

enhancd で cd コマンドを超便利に! インストールと使い方。

曲を作っても、再生数が伸びない。@It_is_Rです。 やかましいわ。 ターミナルをカッコよくするシリーズ4回目です。 今回は enhancd というプラグインを使って cd コマンドを便利

ファイルを分けるべよ!

小学生からのJavaScript入門。ファイルを分けて管理してみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第5弾です。 前回はりこちゃんを方向キーで操作(そうさ)することができるようになりました。 しかしプログラムを作ってくと、コンピュ

コメントをどうぞ!

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