En la versión dos podría usar

insignia insignia importante

Veo que el elemento .badge ya no tiene clases contextuales (-success, -primary, etc.).

¿Cómo logro lo mismo en la versión 3?

P.ej. Quiero insignias de advertencia e insignias importantes en mi interfaz de usuario

Simplemente agregue esta clase de una línea en su CSS y use el labelcomponente bootstrap .

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

Compare esto labely badgelado a lado:

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

Parecen lo mismo. Pero en el CSS, se labelusa empara escalar bien, y todavía tiene todas las clases "-color". Por lo tanto, la etiqueta se escalará mejor a tamaños de fuente más grandes, y se puede colorear con éxito de etiqueta, advertencia de etiqueta, etc. Aquí hay dos ejemplos:

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

O donde las cosas son más grandes:

<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>

16/11/2015 : Mirando cómo haremos esto en Bootstrap 4

Parece que las .badgeclases se han ido por completo. Pero hay una .label-pillclase incorporada (aquí) que se parece a lo que queremos.

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

En uso se ve así:

<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>

11/04/2014 : Aquí hay una actualización sobre por qué las clases de alerta de polinización cruzada .badgeno son tan buenas. Creo que esta imagen lo resume:

Esas clases de alerta no fueron diseñadas para ir con insignias. Los presenta con una "pista" de los colores previstos, pero al final la consistencia se arroja por la ventana y la legibilidad es cuestionable. Esas insignias pirateadas de alerta no son visualmente coherentes.

La .label-as-badgesolución solo extiende el diseño de arranque. Mantenemos intactas todas las decisiones tomadas por los diseñadores de bootstrap, es decir, la consideración que dieron por la legibilidad y la cohesión en todos los colores posibles, así como las elecciones de colores en sí. La .label-as-badgeclase solo agrega esquinas redondeadas, y nada más. No hay definiciones de color introducidas. Por lo tanto, una sola línea de CSS.

Sí, es más fácil simplemente hackear y colocar esas .alert-xxxxxclases, no tienes que agregar ninguna línea de CSS. O podría preocuparse más por las pequeñas cosas y agregar una línea.

En resumen: reemplazar badge-importantcon alert-dangero progress-bar-danger.

Se parece a esto: Bootply Demo .

Puede combinar la clase CSS badgecon alert-*o progess-bar-*para colorearlos:

Con 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

Alertas Docu: http://getbootstrap.com/components/#alerts

Con class="badges progress-bar-*"(como lo sugiere @ 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

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

Bootstrap 3 eliminó esas opciones de color para las insignias. Sin embargo, podemos agregar esos estilos manualmente. Aquí está mi solución, y aquí está 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;
}

Las clases de contexto para badgese eliminan de Bootstrap 3, por lo que tendrías que agregar un CSS personalizado para crear el mismo efecto como ...

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

Bootply

Otra forma posible, para hacer que los colores sean un poco más intensos, es esta:

<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>

Ver Bootply

Si usa una versión SASS (p. Ej., La de thomas-mcdonald's ), es posible que desee ser un poco más dinámico (respetar las variables existentes) y crear todos los contextos de insignias utilizando la misma técnica que se usa para las etiquetas:

// 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);
}

El MENOS equivalente debe ser sencillo.

Al igual que la respuesta anterior, pero aquí está usando bootstrap 3 nombres y colores:

/*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;
}

Al usar la versión MENOS, puede importar mixins.less y crear sus propias clases para insignias de colores:

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

Lo mismo para los otros colores; simplemente reemplace la advertencia con peligro, éxito, etc.

Bueno, esta es una respuesta terriblemente tardía, pero creo que aún pondré mis dos centavos ... Podría haber publicado esto como un comentario porque esta respuesta no agrega esencialmente ninguna solución nueva, pero agrega valor a la publicación como otra alternativa más. Pero en un comentario no podría dar todos los detalles debido al límite de caracteres.

NOTA: Esto necesita una edición para arrancar el archivo CSS: mueva las definiciones de estilo de .badgearriba .label-default. No pude encontrar ningún efecto secundario práctico debido al cambio en mis pruebas limitadas.

Si bien la solución de broc.seib es probablemente la mejor manera de cumplir con los requisitos de OP con una adición mínima a CSS, es posible lograr el mismo efecto sin CSS adicional, como la solución de Jens A. Koch o usando .label-xxxclases contextuales porque son fáciles de recordar en comparación con las progress-bar-xxxclases. No creo que las .alert-xxxclases den el mismo efecto.

Todo lo que tienes que hacer es usar .badgey .label-xxxclasificar juntos (pero en este orden). No olvide hacer los cambios mencionados en la NOTA anterior.

<a href="#">Inbox <span class="badge label-warning">42</span></a> Se ve como esto:

IMPORTANTE: esta solución puede romper sus estilos si decide actualizar y olvida realizar los cambios en su nuevo archivo CSS local. Mi solución para este desafío fue copiar todos los .label-xxxestilos en mi archivo CSS personalizado y cargarlo después de todos los demás archivos CSS. Este enfoque también ayuda cuando uso un CDN para cargar BS3.

** PD: ** Las respuestas mejor calificadas tienen sus pros y sus contras. Es la forma en que prefiere hacer su CSS porque no hay una "única forma correcta" de hacerlo.