Integrar Bootstrap 3 Badge Colors

En este artículo vamos a integrar colores de fondo en la clase BADGE de Bootstrap 3. Integrar Bootstrap 3 Badge Colors.

En el framework Bootstrap 3 por lo general no posee la opción de agregar colores de fondo a las clases de tipo BADGE y para solucionar este inconveniente crearemos clases personalizadas.

Integrar fondo en Badge Bootstrap 3

Si deseamos personalizar nuestros estilos de Bootstrap 3 solo debemos de agregar la clase a la etiqueta de tipo (<span></span>)

Ver Demostración

Estructura HTML

Para aplicar usaremos la etiqueta (<span></span>) y le agregaremos las nuevas clases creadas.

<span class="badge">1</span>
<span class="badge badge-success">2</span>
<span class="badge badge-warning">4</span>
<span class="badge badge-error">6</span>
<span class="badge badge-info">8</span>
<span class="badge badge-inverse">10</span>

Estilos CSS

Agregaremos estilos personalizados para las clases principales.

.badge {
padding: 1px 9px 2px;
font-size: 12.025px;
font-weight: bold;
white-space: nowrap;
color: #ffffff;
background-color: #70b9c5;
-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: ##5cc45e;
}
.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;
}

Código completo de Integración

Aquí les dejare la integración completa para que puedan visualizar al 100% como funciona.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Baulcode - Bootstrap </title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
.badge {
padding: 1px 9px 2px;
font-size: 12.025px;
font-weight: bold;
white-space: nowrap;
color: #ffffff;
background-color: #70b9c5;
-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: ##5cc45e;
}
.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;
}
</style>
</head>

<body translate="no">
<span class="badge">1</span>
<span class="badge badge-success">2</span>
<span class="badge badge-warning">4</span>
<span class="badge badge-error">6</span>
<span class="badge badge-info">8</span>
<span class="badge badge-inverse">10</span>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
</html>