Вкратце: замените badge-important на alert-danger или progress-bar-danger.

Он выглядит так: Демо-версия для загрузки.

Вы можете объединить CSS-класс badge с 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

Оповещения Docu: 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;}

Bootply

Другим возможным способом, чтобы сделать цвета немного более интенсивными, является следующий:

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

Меньший эквивалент должен быть простым.

Как и ответ выше, но здесь используются имена и цвета bootstrap 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;
}

Ну, это ужасно поздний ответ, но я думаю, что я все равно положу свои два цента... Я мог бы разместить это как комментарий, потому что этот ответ существенно не добавляет никакого нового решения, но он добавляет ценность на эту должность в качестве еще одной альтернативы. Но в комментарии я не смог бы дать все детали из-за ограничения характера.

ПРИМЕЧАНИЕ. Для этого требуется отредактировать файл bootstrap CSS - переместите определения стиля для .badge выше .label-default. Не удалось найти никаких практических побочных эффектов из-за изменения моего ограниченного тестирования.

Хотя решение broc.seib, вероятно, лучший способ достичь требования OP с минимальным добавлением к CSS, можно добиться такого же эффекта без каких-либо дополнительных CSS вообще, как решение Йенса А. Коха или используя контекстные классы .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. Этот подход также помогает, когда я использую CDN для загрузки BS3.

** P.S: ** Оба лучших ответа имеют свои плюсы и минусы. Это так, как вы предпочитаете делать свой CSS, потому что для этого нет "только правильного пути".

При использовании версии LESS вы можете импортировать mixins.less и создавать свои собственные классы для цветных значков:

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

То же самое для других цветов; просто замените предупреждение опасностью, успехом и т.д.