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 "https://www.geeksforgeeks.org/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

Syntax:

$variable:value
@import "https://www.geeksforgeeks.org/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

SCSS

$breadcrumb-font-size: 20px;
$breadcrumb-divider: quote("+");
$breadcrumb-divider-color: green;
$breadcrumb-active-color: green;
$breadcrumb-item-padding-x:1.2rem;
@import "./node_modules/bootstrap/scss/bootstrap"

CSS file created after conversion

custom.css

CSS

.breadcrumb {
    --bs-breadcrumb-padding-x: 0;
    --bs-breadcrumb-padding-y: 0;
    --bs-breadcrumb-margin-bottom: 1rem;
    --bs-breadcrumb-font-size: 1.25rem;
    --bs-breadcrumb-bg: ;
    --bs-breadcrumb-border-radius: ;
    --bs-breadcrumb-divider-color: green;
    --bs-breadcrumb-item-padding-x: 1.2rem;
    --bs-breadcrumb-item-active-color: green;
    display: flex;
    flex-wrap: wrap;
    padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);
    margin-bottom: var(--bs-breadcrumb-margin-bottom);
    font-size: var(--bs-breadcrumb-font-size);
    list-style: none;
    background-color: var(--bs-breadcrumb-bg);
    border-radius: var(--bs-breadcrumb-border-radius);
}

.breadcrumb-item+.breadcrumb-item::before {
    float: left;
    padding-right: var(--bs-breadcrumb-item-padding-x);
    color: var(--bs-breadcrumb-divider-color);
    content: var(--bs-breadcrumb-divider, "+")
        /* rtl: var(--bs-breadcrumb-divider, "+") */
    ;
}

index.html

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Breadcrumb variables</title>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <link rel="stylesheet" href="./custom.css">
    <script src=
"node_modules/bootstrap/dist/js/bootstrap.js">
      </script>
</head>
<body>
    <div class="container pt-3">
        <ul class="breadcrumb justify-content-center">
            <li class="breadcrumb-item">
              <a href="#">Continents</a>
            </li>
            <li class="breadcrumb-item">
              <a href="#">Countries</a>
            </li>
            <li class="breadcrumb-item">
              <a href="#">India</a>
            </li>
            <li class="breadcrumb-item">
              <a href="#">Noida</a>
            </li>
            <li class="breadcrumb-item active">
              GeeksforGeeks
            </li>
        </ul>
    </div>
</body>
</html>

Output:

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