Portal GSTI
Portal GSTI

PublicarCadastre-seLogin
Menu
Publicação

Como mudar a cor do Navbar com Bootstrap 4

foto de
Ricardo Sanches CONTEÚDO EM DESTAQUE

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 mudar 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

O exemplo abaixo é disponibilizado no site do Bootstrap e mostra 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...).

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

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

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


Comentários