Bootstrap 5 Breadcrumb Variables

Bootstrap 5 Breadcrumb SASS variables can be used to change the default values provided for the breadcrumb by customizing scss file of Bootstrap5.

SASS variables of Breadcrumb:

• $breadcrumb-font-size: This variable provides the font size of the breadcrumb item. By default, it is null.
• $breadcrumb-padding-y: This variable provides the top padding and bottom padding of the breadcrumb. By default, it is 0.
• $breadcrumb-padding-x: This variable provides the left padding and right padding of the breadcrumb. By default, it is 0.
• $breadcrumb-item-padding-x: This variable provides the left padding and right padding of every breadcrumb item. By default, it is 0.5rem.
• $breadcrumb-bg: This variable provides the background color of the breadcrumb. By default, it is null.
• $breadcrumb-divider-color: This variable provides the color of the divider in the breadcrumb. By default, it is gray in color.
• $breadcrumb-active-color: This variable provides the color of the active breadcrumb item. By default, it is a gray color.
• $breadcrumb-divider: This variable provides the divider for the breadcrumb. By default, it is a forward slash "/".
• $breadcrumb-border-radius: This variable provides the border radius of the breadcrumb. By default, it is null.
• $breadcrumb-margin-bottom: This variable provides the bottom margin of the breadcrumb. By default, it is 1rem.
• $breadcrumb-divider-flipped: This variable provides the divider of breadcrumb on the flip. By default, it is the default forward slash "/".

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: Here the custom scss file name is “custom.scss” and custom.css is converted file

👁 Image

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 breadcrumb and assign new values to it.

custom.scss

CSS file created after conversion

custom.css

index.html

Output:

👁 Image

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

custom.scss

CSS file created after conversion

custom.css

index.html

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.0/components/breadcrumb/#variables