Color de la barra de navegación de Bootstrap 4

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

<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>
brooksrelyt
Pregunta editada 6º noviembre 2019 в 2:43
Programación
bootstrap-4
13º abril 2017 в 12:16
1 vista

Actualización 2019

Recuerde que cualquier anulación de CSS que defina debe ser la misma especificidad de CSS o mayor para anular correctamente el CSS de Bootstrap's.

Bootstrap 4.1+

La barra de navegación es transparente por defecto. Si usted sólo quiere cambiar el color de fondo, puede hacerlo simplemente aplicando el color a la ``, pero recuerde que no cambiará los otros colores como los de los enlaces, hover y el menú desplegable.

Aquí's CSS que cambiará cualquier color relevante de la Navbar 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

Sustituir la barra de navegación por la luz o la oscuridad

Si estás usando las clases navbar-light o navbar-dark de Bootstrap 4, entonces usa esto en los overrides. Por ejemplo, cambiar los colores de los enlaces de la Navbar...

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

Cuando se hace cualquier personalización de Bootstrap, es necesario entender la especificidad del CSS. Los overrides en tu CSS personalizado necesitan usar selectores que sean tan específicos como el bootstrap.css. Leer más

**Barra de navegación transparente

Tenga en cuenta que la barra de navegación de Bootstrap 4 es transparente por defecto. Utiliza navbar-dark para colores de fondo oscuros/negros, y utiliza navbar-light si la navbar es de un color más claro. Esto afectará al color del texto y al color del icono del toggler como se explica aquí.

Relacionado: https://stackoverflow.com/a/18530995/171456

Zim
Respuesta editada 7º marzo 2019 в 12:31
Comentarios (0)

Actualización 2019 - Bootstrap v4.1+

Aquí's una forma mucho más sencilla de cambiar el color de fondo de la navbar.

Sólo tiene que utilizar .navbar-dark en lugar de .navbar-light y añadir su clase de color de fondo personalizado como .bg-company-red.

Con .navbar-dark todos los enlaces serán blancos.

HTML

Estilo CSS...

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

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

Chad
Respuesta editada 22º mayo 2019 в 7:17
Comentarios (5)

Lo tengo. Esto es muy sencillo. Usando la clase bg puedes conseguirlo fácilmente.

Déjame mostrarte:

Esto te da la barra de navegación azul por defecto

Si quieres cambiar tu color favorito, entonces simplemente usa la etiqueta de estilo dentro de la nav:

brooksrelyt
Respuesta editada 6º noviembre 2019 в 2:45
Comentarios (0)