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>
