En Bootstrap 4, ¿cómo hago para cambiar el color de fondo de una barra de navegación? El código de twbscolor no funciona. Quiero hacer que el color de fondo de un color diferente y el color de fuente blanco.

<nav class="navbar navbar-toggleable-md navbar-light bg-danger">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">Jordan Baron</a>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                </li>
            </ul>
        </div>
    </nav>
creo que te falta navbar-dark como se sugiere en algunas respuestas. Una rápida fragmento de código en el stackoverflow.com/a/47900899/2797254
Yo mejor respuesta es aquí, que incluye un enlace a un generador de css;

OriginalEl autor hiboo | 2017-04-13

5 Comentarios

  1. 27

    Actualización de 2019

    Recuerda que cualquiera que sea CSS anula definir debe ser la misma especificidad de CSS o mayor con el fin de poder reemplazar Bootstrap CSS.

    Bootstrap 4.1+

    La Navbar es transparente por defecto. Si usted sólo desea cambiar el color de fondo, se puede hacer simplemente por aplicar el color a la <navbar class="bg-custom">, pero recuerde que no cambian con los otros colores, tales como los enlaces, coloca el ratón y el menú desplegable de colores.

    Aquí CSS que va a cambiar cualquier relevantes de la barra de navegación de colores en Bootstrap 4…

    /* change the background color */
    .navbar-custom {
        background-color: #ff5500;
    }
    /* change the brand and text color */
    .navbar-custom .navbar-brand,
    .navbar-custom .navbar-text {
        color: rgba(255,255,255,.8);
    }
    /* change the link color */
    .navbar-custom .navbar-nav .nav-link {
        color: rgba(255,255,255,.5);
    }
    /* change the color of active or hovered links */
    .navbar-custom .nav-item.active .nav-link,
    .navbar-custom .nav-item:focus .nav-link,
    .navbar-custom .nav-item:hover .nav-link {
        color: #ffffff;
    }
    

    Demo: http://www.codeply.com/go/U9I2byZ3tS


    Reemplazar Navbar de Luz o de Oscuridad

    Si estás usando Bootstrap 4 Navbar navbar-light o navbar-dark clases, entonces el uso de este en los reemplazos. Por ejemplo, el cambio de la barra de navegación, los colores de los enlaces…

    .navbar-light .nav-item.active .nav-link,
    .navbar-light .nav-item:focus .nav-link,
    .navbar-light .nav-item:hover .nav-link {
            color: #ffffff;
    }
    

    La hora de hacer cualquier Bootstrap personalizaciones, usted necesita entender la Especificidad de CSS. Reemplaza en su CSS personalizado necesidad de utilizar los selectores que son tan específicos como el bootstrap.css. Leer más


    Navbar Transparente

    Aviso de que el Bootstrap 4 Navbar transparente por defecto. Uso navbar-dark por la oscuridad de la negrita de los colores de fondo, y el uso navbar-light si la barra de navegación, es de un color más claro. Esto afectará el color del texto y el color de la toggler icono como se explica aquí.

    Relacionados con: https://stackoverflow.com/a/18530995/171456

    Te falta una coma en tu css fragmentos. Después de .navbar-custom .nav-item:focus .nav-link y .navbar-light .nav-item:focus .nav-link

    OriginalEl autor Zim

  2. 19

    Actualización de 2018 – Bootstrap v4.1+

    Aquí una forma mucho más simple manera de cambiar la barra de navegación de color de fondo.

    Solo uso .navbar-dark en lugar de .navbar-light y agregar su color de fondo personalizado de clase como .bg-company-red

    .navbar-dark hará que todos tus enlaces blanco.

    HTML

    <nav class="navbar navbar-dark bg-company-red">
    

    De estilo CSS…

    .bg-company-red {
        background-color: darkred !important;
    }
    

    Ver http://getbootstrap.com/docs/4.1/components/navbar/#color-schemes para la documentación oficial.

    Hola! Estoy usando webpack para todos mis archivos css externos. Una vez que tratan de anular los estilos de Bootstrap 4 debo utilizar !important regla, de lo contrario no se aplican. Hace mecanismo de personalización ha cambiado en la v4? Con la v3 he tenido ningún tipo de problemas
    Es posible que sólo necesita ser más específico en tu CSS selector de modo que usted no necesita utilizar !important. Así que en lugar de .special-class intentar body > header > .special-class. Copia el selector que Bootstrap está utilizando y, a continuación, sólo asegúrese de que su anular los estilos se incluyen después de la rutina de arranque estilos.
    Gracias por los consejos! He intentado un montón de combinaciones, pero sólo important! cambios de propiedades. Muy extraña situación…
    Bueno, fue mi culpa: yo tenía el .bg-dark clase que ya había !important regla. La eliminación de lo resuelto el problema

    OriginalEl autor Chad

  3. 0

    Lo tengo. Esto es muy simple.
    Uso de la clase bg usted puede lograr esto fácilmente.
    Permítanme mostrarles:

     <nav class="navbar navbar-expand-lg navbar-dark navbar-full bg-primary"></nav>
    

    Esto le da el valor predeterminado azul navbar

    Si quieres cambiar tu color favorito, a continuación, utilice simplemente el estilo de la etiqueta dentro de la nav:

    <nav class="navbar navbar-expand-lg navbar-dark navbar-full" style="background-color: #FF0000">
    

    OriginalEl autor INONAME

  4. 0

    puede escribir !importante en frente de la propiedad background-color valor como este
    se va a cambiar el color de los enlaces.

    .nav-link {
        color: white !important;
    }
    
    Esta no es una buena idea. Uso de !importante no es una buena práctica e innecesario.

    OriginalEl autor Hamza Arshad

Dejar respuesta

Please enter your comment!
Please enter your name here