バージョン2では、

バッジバッジ重要

.badge要素にコンテキスト（-success、-primaryなど）のクラスがなくなったことがわかります。

バージョン3で同じことをするにはどうすればよいですか？

例えば。UIに警告バッジと重要なバッジが欲しい

この1行のクラスをCSSに追加し、ブートストラップlabelコンポーネントを使用するだけです。

.label-as-badge {
    border-radius: 1em;
}

これlabelと並べて比較してくださいbadge：

<span class="label label-default label-as-badge">hello</span>
<span class="badge">world</span>

彼らは同じように見えます。しかし、CSSでは、をlabel使用emして適切にスケーリングし、すべての「-color」クラスをまだ持っています。したがって、ラベルはより大きなフォントサイズに適切にスケーリングされ、label-success、label-warningなどで色付けできます。以下に2つの例を示します。

<span class="label label-success label-as-badge">Yay! Rah!</span>

または、物事がより大きい場合：

<div style="font-size: 36px"><!-- pretend an enclosing class has big font size -->
    <span class="label label-success label-as-badge">Yay! Rah!</span>
</div>

2015年11月16日：Bootstrap 4でこれをどのように行うかを検討する

.badgeクラスが完全になくなったように見えます。しかし、私たちが望むように見える組み込み.label-pillクラス（ここ）があります。

.label-pill {
  padding-right: .6em;
  padding-left: .6em;
  border-radius: 10rem;
}

使用中は次のようになります。

<span class="label label-pill label-default">Default</span>
<span class="label label-pill label-primary">Primary</span>
<span class="label label-pill label-success">Success</span>
<span class="label label-pill label-info">Info</span>
<span class="label label-pill label-warning">Warning</span>
<span class="label label-pill label-danger">Danger</span>

2014年11月4日：警告クラスのクロス受粉.badgeがそれほど優れていない理由に関する最新情報を以下に示します。この写真はそれを要約すると思います：

これらのアラートクラスは、バッジに合わせて設計されていません。意図した色の「ヒント」を使ってそれらをレンダリングしますが、最終的には一貫性がウィンドウからスローされ、読みやすさが疑問視されます。これらのアラートハッキングされたバッジは視覚的にまとまりがありません。

.label-as-badge解決策は、ブートストラップのデザインを拡張しています。ブートストラップデザイナーによるすべての意思決定、つまり、考えられるすべての色と色の選択自体に対する可読性とまとまりについての考慮事項はそのままにしています。.label-as-badgeクラスは唯一の角を丸めて、他には何が追加されます。導入された色の定義はありません。したがって、CSSの1行です。

うん、それだけでハックし、それらの中にドロップすることが容易である.alert-xxxxxあなたが追加する必要はありません-クラス任意の CSSの行を。もしくは、あなたことをもっと気にして、1行追加することもできます。

つまりbadge-important、alert-dangerまたはに置き換えますprogress-bar-danger。

これは次のようになります：Bootply Demo。

CSSクラスbadgeを組み合わせたり、CSSクラスに色を付けalert-*たりprogess-bar-*することができます。

と class="badges alert-*"

  <span class="badge alert-info">badge</span> Info
  <span class="badge alert-success">badge</span> Success 
  <span class="badge alert-danger">badge</span> Danger   
  <span class="badge alert-warning">badge</span> Warning

アラートドキュメント： http : //getbootstrap.com/components/#alerts

とclass="badges progress-bar-*"（@ clami219で提案されているように）

  <span class="badge progress-bar-info">badge</span> Info
  <span class="badge progress-bar-success">badge</span> Success
  <span class="badge progress-bar-danger">badge</span> Danger
  <span class="badge progress-bar-warning">badge</span> Warning

Progress-Bar Docu： http : //getbootstrap.com/components/#progress-alternatives

Bootstrap 3では、バッジの色オプションが削除されました。ただし、これらのスタイルは手動で追加できます。これが私の解決策です、そしてこれがJS Binです：

.badge {
  padding: 1px 9px 2px;
  font-size: 12.025px;
  font-weight: bold;
  white-space: nowrap;
  color: #ffffff;
  background-color: #999999;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
}
.badge:hover {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}
.badge-error {
  background-color: #b94a48;
}
.badge-error:hover {
  background-color: #953b39;
}
.badge-warning {
  background-color: #f89406;
}
.badge-warning:hover {
  background-color: #c67605;
}
.badge-success {
  background-color: #468847;
}
.badge-success:hover {
  background-color: #356635;
}
.badge-info {
  background-color: #3a87ad;
}
.badge-info:hover {
  background-color: #2d6987;
}
.badge-inverse {
  background-color: #333333;
}
.badge-inverse:hover {
  background-color: #1a1a1a;
}

のコンテキストクラスbadgeは実際にBootstrap 3から削除されているため、同じ効果を作成するには、いくつかのカスタムCSSを追加する必要があります...

.badge-important{background-color:#b94a48;}

ブートプライ

色をもう少し濃くするための別の可能な方法はこれです：

<span class="badge progress-bar-info">10</span>
<span class="badge progress-bar-success">20</span>
<span class="badge progress-bar-warning">30</span>
<span class="badge progress-bar-danger">40</span>

Bootplyを参照

SASSバージョン（例：thomas-mcdonald's one）を使用している場合は、少し動的（既存の変数を尊重する）にし、ラベルに使用するのと同じ手法を使用してすべてのバッジコンテキストを作成することができます。

// Colors
// Contextual variations of badges
// Bootstrap 3.0 removed contexts for badges, we re-introduce them, based on what is done for labels
.badge-default {
  @include label-variant($label-default-bg);
}

.badge-primary {
  @include label-variant($label-primary-bg);
}

.badge-success {
  @include label-variant($label-success-bg);
}

.badge-info {
  @include label-variant($label-info-bg);
}

.badge-warning {
  @include label-variant($label-warning-bg);
}

.badge-danger {
  @include label-variant($label-danger-bg);
}

LESSに相当するものは簡単です。

上記の答えと同様ですが、ここではブートストラップ3の名前と色を使用しています。

/*css to add back colours for badges and make use of the colours*/
.badge-default {
  background-color: #999999;
}

.badge-primary {
  background-color: #428bca;
}

.badge-success {
  background-color: #5cb85c;
}

.badge-info {
  background-color: #5bc0de;
}

.badge-warning {
  background-color: #f0ad4e;
}

.badge-danger {
  background-color: #d9534f;
}

LESSバージョンを使用する場合、mixins.lessをインポートして、色付きのバッジ用の独自のクラスを作成できます。

.badge-warning {
    .label-variant(@label-warning-bg);
}

他の色についても同じです。警告を危険、成功などに置き換えるだけです。

ええと、これはひどく遅い答えですが、私はまだ2セントを入れると思います...この答えは本質的に新しいソリューションを追加しないので、コメントに投稿することができますが、投稿に価値を追加しますさらに別の選択肢として。しかし、コメントでは、文字数制限のため、すべての詳細を提供することはできません。

注：これにはCSSファイルをブートストラップするための編集が必要です- .badge上記のスタイル定義を移動してください.label-default。限られたテストの変更により、実用的な副作用は見つかりませんでした。

一方でbroc.seibのソリューションは、おそらくCSSに最小限の添加とOPの要件を達成するための最良の方法ですが、同じように、すべての余分なCSSなしで同じ効果を達成することが可能であるイェンス・A.コッホのソリューションまたは使用することによって.label-xxx、彼らので、コンテキストクラスをprogress-bar-xxxクラスに比べて覚えやすいです。私はそうは思いません.alert-xxxクラスが同じ効果をもたらす。

あなたがしなければならないのは.badge、.label-xxxクラスとクラスを一緒に使用することだけです（ただし、この順序で）。上記の注に記載されている変更を行うことを忘れないでください。

<a href="#">Inbox <span class="badge label-warning">42</span></a> このようになります：

重要：このソリューションは、アップグレードして新しいローカルCSSファイルに変更を加えるのを忘れた場合、スタイルが壊れる可能性があります。この課題に対する私の解決策は、すべてをコピーすることでした.label-xxxは、カスタムCSSファイルのスタイルし、他のすべてのCSSファイルの後にロードすることでした。このアプローチは、BSNのロードにCDNを使用する場合にも役立ちます。

** PS：**最高評価の回答には両方の長所と短所があります。それを行うには「正しい方法だけ」がないので、CSSを実行する方法としてはこれだけです。