Bootstrap 5 Badges SASS

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

👁 Image

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

CSS file created after conversion

custom.css

index.html

Output:

👁 Image

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

CSS file created after conversion

custom.css

index.html

Output:

👁 Image

Reference:

https://getbootstrap.com/docs/5.0/components/badge/#sass