Color de la barra de navegación Bootstrap 4

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 sea de un color diferente y el color de fuente blanco.

 

Actualización 2018 – Bootstrap v4.1

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

Simplemente use .navbar-dark lugar de .navbar-light y agregue su clase de color de fondo personalizada como .bg-company-red

.navbar-dark hará que todos tus enlaces sean blancos.

HTML

  

Estilo CSS …

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

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

Actualización 2018

Recuerde que, independientemente de las anulaciones de CSS que defina, debe ser la misma especificidad de CSS o superior para anular correctamente el CSS de Bootstrap.

Bootstrap 4.1+

Aquí está CSS que cambiará el color de la barra de navegación 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:hover .nav-link { color: #ffffff; } 

Demostración: http://www.codeply.com/go/U9I2byZ3tS

Recuerde también que BS4 todavía está en alfa, por lo que estas clases pueden cambiar. Además, el bg-danger en su marcado anulará el color de fondo general.

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

Si lees la documentación de bootstrap 4, Esquemas de color , responderá tus preguntas.

Entiendo. Esto es muy simple. Usando la clase bg puedes lograr esto fácilmente. Deja que te enseñe:

   

Esto te da la barra de navegación azul predeterminada

Si desea cambiar su color favorito, simplemente use la etiqueta de estilo dentro del navegador: