Open In App

Bootstrap 5 Badges SASS

Improve
Improve
Like Article
Like
Save
Share
Report

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

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

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

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

SCSS




$badge-padding-y:1.5em;
$badge-padding-x:3em;
@import "./node_modules/bootstrap/scss/bootstrap"


CSS file created after conversion

custom.css

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

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



Last Updated : 26 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads