Como alterar a cor do Navbar com Bootstrap 4

O Bootstrap 4 chegou com muitas novidades e uma bem interessante é facilidade de personalização do componente Navbar. Neste vídeo você vai aprender como alterar a cor do Navbar com Bootstrap 4 para deixar seu site ainda mais atrativo.

Novas classes

O Navbar ganhou 2 classes novas na versão 4 do Bootstrap e isso facilitou muito o processo de personalização da cor deste componente. Veja abaixo uma pequena explicação de como usar estas classes:

  • navbar-dark: Define os textos com a cor branca
  • navbar-light: Define os textos com a cor preta
  • bg-dark, bg-light, bg-(primary, info, success, warning e danger): Definem a cor de fundo

Os exemplos abaixo são disponibilizados no site do Bootstrap e mostram exatamente como utilizar as novas classes de cores do Navbar. Lembre-se de utilizar a classe que define a cor do texto (navbar-dark ou navbar-light) junto com a classe que define a cor de fundo (bg-dark, bg-light, bg-primary…).

Exemplo 01: Barra cinza escura com letras brancas


<nav class="navbar navbar-dark bg-dark">
<!-- Navbar content -->
</nav>

Exemplo 02: Barra azul com letras brancas


<nav class="navbar navbar-dark bg-primary">
<!-- Navbar content -->
</nav>

Exemplo 03: Barra cinza claro com letras pretas


<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
<!-- Navbar content -->
</nav>


Aprenda muito mais sobre Bootstrap, web design e marketing digital em meu canal no YouTube. Inscreva-se.

Aproveite e veja neste tutorial como criar efeito de zoom com mouse sobre a imagem só com CSS.


Publicado em 29 de outubro de 2017


Dúvidas? Deixe seu comentário.

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

*
*