Bootstrap 5 Cards SASS

Bootstrap 5 Cards SASS can be used to change the default values provided for the card by customizing scss file.

SASS variables of cards:

• $card-spacer-y: This variable provides the top padding and bottom padding of the content inside the card header, card body, and card footer. By default, it is 1rem.
• $card-spacer-x: This variable provides the left padding and right padding of the content inside the card header, card body, and card footer. By default, it is 1rem.
• $card-title-spacer-y: This variable provides the bottom padding of the card title inside the class 'card-body'. By default, it is 0.5rem.
• $card-border-width: This variable provides the width of the card border. By default, it is 1px.
• $card-border-radius: This variable provides the border radius of the border of the card. By default, it is 0.375rem.
• $card-border-color: This variable provides the border color of the card component. By default, it is black color with an opacity of 0.125
• $card-inner-border-radius: This variable provides the inner border radius of the card. By default, it is -0.315rem.
• $card-cap-padding-y: This variable provides the top padding and bottom padding of the content in the header and footer of the card. By default, it is 0.5rem.
• $card-cap-padding-x: This variable provides the left padding and right padding of the content in the header and footer of the card. By default, it is 1rem.
• $card-cap-bg: This variable provides the background color of the card header and card footer. By default, it is black color with an opacity of 0.03
• $card-cap-color: This variable provides the font color of the content in the card header and card footer. By default, it is null.
• $card-height: This variable provides the total height of the card component. By default, it is null.
• $card-color: This variable provides the color of the text to the content inside the element with the class 'card-body'. By default, it is "null".
• $card-bg: This variable provides the background color of the card. By default, it is "white" in color.
• $card-img-overlay-padding: This variable provides the padding of the content inside the element with the class 'card-img-overlay' which overlays an image in the card component. By default, it is 1rem.
• $card-group-margin: This variable provides the margin of the card group. By default, it is 0.75rem.

Steps to override scss of Bootstrap:

Step 1: Install bootstrap using the 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 a live server extension.

Step 4: Include the converted scss file to your HTML after the link tag of Bootstrap CSS.  

Project Structure: The custom scss file name is “custom.scss” and "custom.css" is the converted file.

Syntax:

$variable:value;
@import "./node_modules/bootstrap/scss/bootstrap"

Example 1: In this example, we make use of some of the above variables of the cards and assign new values to them.

• custom.scss

• custom.css

Output:

Example 2: In this example, we make use of some of the above variables of the cards and assign new values to them.

• custom.scss

• custom.css

Output:

Reference: https://getbootstrap.com/docs/5.0/components/card/#sass