Bootstrap badge custom color example
May 19, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
In this tutorial, we will learn how to create badge custom color in bootstrap.
Badges are used to add additional information to any content. Use the .badge class together with a contextual class (like .badge-secondary) within <span> elements to create rectangular badges. Note that badges scale to match the size of the parent element (if any):
Table of contents
- Includes bootstrap view
- Includes bootstrap library
- Includes css in html page
- Define its class name
This article will guide you to adding badge custom color in Bootstrap 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 <head>.
<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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>Step 3: Includes css in html page
Use any of the contextual classes (.badge-*) to change the color of a badge:
Here we will use css to change contextual classes.
<style>
.badge-primary {
color: #ebeef0;
background-color: #B23CFD;
}
.badge-secondary{
color: #ebeef0;
background-color: #2abe74;
}
.badge-success {
color: #ebeef0;
background-color: #b9fd3c;
}
.badge-danger{
color: #ebeef0;
background-color: #e93e9c;
}
.badge-warning {
color: #ebeef0;
background-color: #5f3cfd;
}
.badge-info {
color: #ebeef0;
background-color: #fd3c46;
}
.badge-light {
color: #ebeef0;
background-color: #3cfdbd;
}
.badge-dark {
color: #ebeef0;
background-color: #064118;
}
</style>Step 4: Define its class name
After that, create the badge custom color with a class name badge badge-primary.
<div class="container">
<h2>Bootstrap badge custom color</h2>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
</div>Example.
Let’s look at the following example to understand how it basically works:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
.badge-primary {
color: #ebeef0;
background-color: #B23CFD;
}
.badge-secondary{
color: #ebeef0;
background-color: #2abe74;
}
.badge-success {
color: #ebeef0;
background-color: #b9fd3c;
}
.badge-danger{
color: #ebeef0;
background-color: #e93e9c;
}
.badge-warning {
color: #ebeef0;
background-color: #5f3cfd;
}
.badge-info {
color: #ebeef0;
background-color: #fd3c46;
}
.badge-light {
color: #ebeef0;
background-color: #3cfdbd;
}
.badge-dark {
color: #ebeef0;
background-color: #064118;
}
</style>
</head>
<body>
<div class="container">
<h2>Bootstrap badge custom color</h2>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
</div>
</body>
</html>Check the output of the above code example.
All the best 👍