Hi Friends 👋,
Welcome To aGuideHub! ❤️
To change navbar color, put the .navbar-dark bg-color class for change navbar color in bootstrap 5.
Today, I am going to show you. how to change navbar color in bootstrap 5 with code example.
Use any of the .bg-color classes to add a background color to the navbar.
Tip: Add a white text color to all links in the navbar with the .navbar-dark class, or use the .navbar-light class to add a black text color.
Table of contents
- Includes bootstrap view
- Includes bootstrap library
- Define its class name
Background color change
Bootstrap 5 provides the following inbuilt classnames we can use in the navigation bar
- bg-primary - primary color
- bg-secondary - change background color to secondary
- bg-success - change background to success color
- bg-danger - updates background to danger color
- bg-warning - warning color is updated in the background
- bg-info - information color is updated in background
- bg-light- light color
- bg-dark - dark color
- bg-white - background color is white
This article will guide you to adding change navbar color in Bootstrap 5 with example.
Step 1: Includes bootstrap view
To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your .
meta name="viewport" content="width=device-width, initial-scale=1">Step 2: Includes bootstrap library
First of all, load the Bootstrap framework CSS into the head tag of your webpage.
link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">Step 3: Define its class name
After that, change navbar color with a class name .navbar-dark bg-color.
nav class="navbar navbar-expand-sm bg-light navbar-light">
ul class="navbar-nav">
li class="nav-item">
a class="nav-link active" aria-current="page" href="#">Homea>
li>
li class="nav-item">
a class="nav-link" href="#">Abouta>
li>
li class="nav-item">
a class="nav-link" href="#">Bloga>
li>
li class="nav-item">
a class="nav-link " href="#">Contacta>
li>
ul>
nav>
nav class="navbar navbar-expand-sm bg-dark navbar-dark">
ul class="navbar-nav">
li class="nav-item">
a class="nav-link active" aria-current="page" href="#">Homea>
li>
li class="nav-item">
a class="nav-link" href="#">Abouta>
li>
li class="nav-item">
a class="nav-link" href="#">Bloga>
li>
li class="nav-item">
a class="nav-link " href="#">Contacta>
li>
ul>
nav>
nav class="navbar navbar-expand-sm bg-primary navbar-dark">
ul class="navbar-nav">
li class="nav-item">
a class="nav-link active" aria-current="page" href="#">Homea>
li>
li class="nav-item">
a class="nav-link" href="#">Abouta>
li>
li class="nav-item">
a class="nav-link" href="#">Bloga>
li>
li class="nav-item">
a class="nav-link " href="#">Contacta>
li>
ul>
nav>
nav class="navbar navbar-expand-sm bg-success navbar-dark">
ul class="navbar-nav">
li class="nav-item">
a class="nav-link active" aria-current="page" href="#">Homea>
li>
li class="nav-item">
a class="nav-link" href="#">Abouta>
li>
li class="nav-item">
a class="nav-link" href="#">Bloga>
li>
li class="nav-item">
a class="nav-link " href="#">Contacta>
li>
ul>
nav>
nav class="navbar navbar-expand-sm bg-info navbar-dark">
ul class="navbar-nav">
li class="nav-item">
a class="nav-link active" aria-current="page" href="#">Homea>
li>
li class="nav-item">
a class="nav-link" href="#">Abouta>
li>
li class="nav-item">
a class="nav-link" href="#">Bloga>
li>
li class="nav-item">
a class="nav-link " href="#">Contacta>
li>
ul>
nav>
nav class="navbar navbar-expand-sm bg-warning navbar-dark">
ul class="navbar-nav">
li class="nav-item">
a class="nav-link active" aria-current="page" href="#">Homea>
li>
li class="nav-item">
a class="nav-link" href="#">Abouta>
li>
li class="nav-item">
a class="nav-link" href="#">Bloga>
li>
li class="nav-item">
a class="nav-link " href="#">Contacta>
li>
ul>
nav>
nav class="navbar navbar-expand-sm bg-danger navbar-dark">
ul class="navbar-nav">
li class="nav-item">
a class="nav-link active" aria-current="page" href="#">Homea>
li>
li class="nav-item">
a class="nav-link" href="#">Abouta>
li>
li class="nav-item">
a class="nav-link" href="#">Bloga>
li>
li class="nav-item">
a class="nav-link " href="#">Contacta>
li>
ul>
nav>
nav class="navbar navbar-expand-sm bg-secondary navbar-dark">
ul class="navbar-nav">
li class="nav-item">
a class="nav-link active" aria-current="page" href="#">Homea>
li>
li class="nav-item">
a class="nav-link" href="#">Abouta>
li>
li class="nav-item">
a class="nav-link" href="#">Bloga>
li>
li class="nav-item">
a class="nav-link " href="#">Contacta>
li>
ul>
nav> Example.
Let’s look at the following example to understand how it basically works:
doctype html>
html lang="en">
head>
meta charset="utf-8">
meta name="viewport" content="width=device-width, initial-scale=1">
link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
title> Bootstraptitle>
head>
body>
h1>aGuideHub
