How to use the inbuilt color classes In Bootstrap
Changing the text color: The text color of the navigation bar can be changed using two inbuilt classes:
Class | Description |
---|---|
navbar-light | Sets text color to dark. Used with a light background. |
navbar-dark | Sets text color to light. Used with the dark background. |
Changing the background color:
Bootstrap 4 has a few inbuilt classes for the colors of any background. These can be used to set the color of the background of the navigation bar. The various background classes available are:
Class | Description |
---|---|
.bg-primary | Sets color to primary. |
.bg-secondary | Sets color to secondary. |
.bg-success | Sets color to success. |
.bg-danger | Sets color to danger. |
.bg-warning | Sets color to warning. |
.bg-info | Sets color to info. |
.bg-light | Sets color to light. |
.bg-dark | Sets color to dark. |
.bg-white | Sets color to white. |
.bg-transparent | Sets navbar to transparent. |
Example: In this example we demonstrates how to change the navigation bar color in Bootstrap using different background color classes like bg-light, bg-warning, bg-dark, bg-primary, bg-secondary, and bg-success.
<!DOCTYPE html>
<html>
<head>
<title>
How to change navigation bar color in Bootstrap ?
</title>
<!-- Include Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<!-- Navbar text is dark and background is light -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
Light color background
</a>
</nav>
<nav class="navbar navbar-light bg-warning">
<a class="navbar-brand" href="#">
Warning color background
</a>
</nav>
<!-- Navbar text is light and background is dark -->
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">
Dark color background
</a>
</nav>
<nav class="navbar navbar-dark bg-primary">
<a class="navbar-brand" href="#">
Primary color background
</a>
</nav>
<nav class="navbar navbar-dark bg-secondary">
<a class="navbar-brand" href="#">
Secondary color background
</a>
</nav>
<nav class="navbar navbar-dark bg-success">
<a class="navbar-brand" href="#">
Success color background
</a>
</nav>
</body>
</html>
Output:
How to change navigation bar color in Bootstrap ?
In Bootstrap, the navigation bar color refers to the background color of the navbar component. To change the navigation bar color in Bootstrap, use utility classes like bg-primary, and bg-secondary, or customize with CSS targeting the navbar element. It determines the background color, allowing for easy color customization.
The navigation bar color can be changed in Bootstrap using 2 methods:
Table of Content
- Using the inbuilt color classes
- Creating a custom class for the navigation bar