Mudar a cor da Navbar do Bootstrap

Bootstrap versão 3

Para mudar a cor da navbar podemos usar o parâmetro style. Ele permite modificar o CSS padrão de qualquer elemento HTML.

De acordo com o Boostrap, o código que monta a navbar é esse:

<nav class="navbar navbar-light bg-faded">

O parâmetro class define qual a formatação CSS que a tag nav irá assumir, mas podemos modificá-la usando o style, ficando assim:

<nav class="navbar navbar-light bg-faded" style="background-color: #ABC; border-color: #000;">

No exemplo acima obteremos uma navbar da cor azul e com borda preta.

Caso queira modificar outros atributos, leia este artigo da Stack Over Flow: http://stackoverflow.com/questions/18529274/change-navbar-color-in-twitter-bootstrap-3

O bootstrap oferece também outras 3 cores pré-definidas, a navibar de cor preta, a de cor azul e azul claro, bastando aplicar o código a seguir;

Bootstrap versão 4

O BS em sua versão 4 oferece opções mais simples para desenvolvedores iniciantes. A documentação da versão 4 e os códigos CDNs podem ser obtidos em http://v4-alpha.getbootstrap.com/ Notá-se que a versão 4 ainda não está totalmente finalizada, portanto, alguns recursos interativos que dependam de JS podem não funcionar.

Preto

navbar1

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

Azul

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

Azul Claro

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

 

Deixe seu comentário