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

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

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

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

目次
  1. バッジ ( badge )
  2. まとめ
  3. 参考サイト

バッジ ( 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によるボタンの作り方。色やサイズなどの指定方法!
  6. 【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法
  7. 【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方
  8. 【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!

スポンサードリンク

関連コンテンツ

オススメ記事

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

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

【初心者向け】webpack 4入門。一番簡単で詳しい使い方

風邪をひいてぼんやりしている@It_is_Rです。どちらにしろいつもぼんやりしてますが。 さて、今回はWebpack4について紹介していきたいと思います。 この記事では、jsファイルをビルドす

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

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

【Android Studio】エミュレータを起動してプログラムを実行する方法!

何をやっても長続きしない@It_is_Rです。 このままでは人生さえも長続きしないかも知れない。 さて、しばらくぶりになってしまいましたが、今回は Android Studio 2.3.2 を

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

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

Homebrew

Homebrewの使い方。よく使うコマンド一覧と詳しい解説まとめ

※追記 この記事は2018/04/30に最新の情報に書き直しました。 人生をもう一度やり直したいとつくづく思う@It_is_Rです。 今回はHomebrewについての記事を書いて

.zshrc で zsh をカスタマイズしてみよう。(プラグイン無し)

昔、車に幽霊が乗っていたので、じっと目を凝らして見ていたら、ただの人だったことがあります。@It_is_Rです。 あの時は気まずかった。。。女性の方でした。 さて、今回はターミナルをかっこよく

【Android Studio】TextView を使ってテキストを変更、追加する方法。

TextViewの文字列を変更するより、これまでの人生を変更したい@It_is_Rです。 Android Studioを使ったアプリ開発講座6回目です。 今回はアプリに表示されたテキストを変更

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

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

wordpress

WordPress – デフォルトで用意されたショートコード一覧と使い方。

昔は WordPress の画面が真っ白になって、頭も真っ白になったこともありました。@It_is_Rです。 WordPress では、プラグインを使ったりしない限り、投稿記事のなかで php

コメントをどうぞ!

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