Integrar Bootstrap 3 Badge Colors

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.

Índice

    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>

    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

     

    Deja una respuesta

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

    Subir