Bootstrap5 Badges SASS is used to change the default value of badge’s font size, font color, padding, border radius, and font-weight.
SASS variables of Badge:
- $badge-font-size: This variable provides the font size of the badge. By default, it is 0.75em.
- $badge-font-weight: The variable provides the font weight of the badge. By default, it is 700.
- $badge-color: This variable provides the font color of the badge. By default, it is white.
- $badge-padding-y: This variable provides the top padding and bottom padding of the text of the badge. By default, it is 0.35em.
- $badge-padding-x: This variable provides the left padding and right padding of the text of the badge. By default, it is 0.65em.
- $badge-border-radius: This variable provides the border radius of the badge. By default, it is 0.375rem.
Steps to override scss of Bootstrap:
Step 1: Install bootstrap using following command:
npm i bootstrap
Step 2: Create your custom scss file and write the variable you want to override. Then include the bootstrap scss file using import.
$class_to_override: values; @import "node_modules/bootstrap/scss/bootstrap"
Step 3: Convert the file to CSS using live server extension.
Step 4: Include the converted scss file to your HTML after the link tag of Bootstrap css.
Project Structure: Here the custom scss file name is “custom.scss” and custom.css is converted file
Syntax:
$class_to_override: values; @import "node_modules/bootstrap/scss/bootstrap"
Example 1: In this example, make use of the $badge-font-size, $badge-font-weight, $badge-color, $badge-border-radius variables. Here in the scss file, the font size is changed to 25px, the font weight is changed to 900, the color of the badge text is changed to black and the border-radius is changed to 20px.
custom.scss
$badge-font-size: 25px;
$badge-font-weight:900;
$badge-color: black;
$badge-border-radius:20px;
@import "./node_modules/bootstrap/scss/bootstrap"
|
CSS file created after conversion
custom.css
.badge { --bs-badge-padding-x: 0.65em;
--bs-badge-padding-y: 0.35em;
--bs-badge-font-size: calc(1.28125rem + 0.375vw);
--bs-badge-font-weight: 900;
--bs-badge-color: black;
--bs-badge-border-radius: 20px;
display: inline-block;
padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
font-size: var(--bs-badge-font-size);
font-weight: var(--bs-badge-font-weight);
line-height: 1;
color: var(--bs-badge-color);
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: var(--bs-badge-border-radius);
} |
index.html
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href=
rel="stylesheet">
<script src=
"node_modules/bootstrap/dist/js/bootstrap.js">
</script>
<style>
.badge {
--bs-badge-padding-x: 0.65em;
--bs-badge-padding-y: 0.35em;
--bs-badge-font-size: calc(1.28125rem + 0.375vw);
--bs-badge-font-weight: 900;
--bs-badge-color: black;
--bs-badge-border-radius: 20px;
display: inline-block;
padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
font-size: var(--bs-badge-font-size);
font-weight: var(--bs-badge-font-weight);
line-height: 1;
color: var(--bs-badge-color);
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: var(--bs-badge-border-radius);
</style>
</head>
<body class="text-center">
<h1 class="text-success">GeeksforGeeks</h1>
<h3>
<span class="badge bg-success">New</span>
<span class="badge bg-success">Update</span>
<span class="badge bg-success">New post</span>
</h3>
</body>
</html>
|
Output:
Output
Example 2: In this example, making use of the $badge-padding-x and $badge-padding-y variables. Here in the scss file, the top padding and bottom padding of the badge is changed to 1.5em, and the left padding and right padding of the badge is changed to 3em.
custom.scss
$badge-padding-y:1.5em;
$badge-padding-x:3em;
@import "./node_modules/bootstrap/scss/bootstrap"
|
CSS file created after conversion
custom.css
.badge { --bs-badge-padding-x: 3em;
--bs-badge-padding-y: 1.5em;
--bs-badge-font-size: 0.75em;
--bs-badge-font-weight: 700;
--bs-badge-color: #fff;
--bs-badge-border-radius: 0.375rem;
display: inline-block;
padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
font-size: var(--bs-badge-font-size);
font-weight: var(--bs-badge-font-weight);
line-height: 1;
color: var(--bs-badge-color);
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: var(--bs-badge-border-radius);
} |
index.html
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href=
rel="stylesheet">
<script src=
"node_modules/bootstrap/dist/js/bootstrap.js">
</script>
<style>
.badge {
--bs-badge-padding-x: 3em;
--bs-badge-padding-y: 1.5em;
--bs-badge-font-size: 0.75em;
--bs-badge-font-weight: 700;
--bs-badge-color: #fff;
--bs-badge-border-radius: 0.375rem;
display: inline-block;
padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
font-size: var(--bs-badge-font-size);
font-weight: var(--bs-badge-font-weight);
line-height: 1;
color: var(--bs-badge-color);
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: var(--bs-badge-border-radius);
}
</style>
</head>
<body class="text-center">
<h1 class="text-success">GeeksforGeeks</h1>
<h3>
<span class="badge bg-success">New</span>
<span class="badge bg-success">Update</span>
<span class="badge bg-success">New post</span>
</h3>
</body>
</html>
|
Output:
Output
Reference:
https://getbootstrap.com/docs/5.0/components/badge/#sass