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

Ver Demostración

Estructura HTML

Para aplicar usaremos la etiqueta () y le agregaremos las nuevas clases creadas.

1
2
4
6
8
10

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.





Baulcode - Bootstrap 
1246810

Conclusión

Para una integración dinámica no olvidar de integrar el framework bootstrap 3 via CDN

Las versiones posteriores de Bootstrap ya poseen estas clases integradas por defecto.

Ver Demostración

 

Sobre el autor

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio