Open In App

Bootstrap 5 Breadcrumb Variables

Improve
Improve
Like Article
Like
Save
Share
Report

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

 

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

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=
          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:

Output

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

SCSS




$breadcrumb-padding-y: 35px;
$breadcrumb-padding-x: 17px;
$breadcrumb-border-radius:40px;
$breadcrumb-bg: green;
$breadcrumb-font-size: 20px;
$breadcrumb-divider: quote("&");
$breadcrumb-divider-color: white;
$breadcrumb-active-color: black;
$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: 17px;
    --bs-breadcrumb-padding-y: 35px;
    --bs-breadcrumb-margin-bottom: 1rem;
    --bs-breadcrumb-font-size: 1.25rem;
    --bs-breadcrumb-bg: green;
    --bs-breadcrumb-border-radius: 40px;
    --bs-breadcrumb-divider-color: white;
    --bs-breadcrumb-item-padding-x: 1.2rem;
    --bs-breadcrumb-item-active-color: black;
    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=
          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="#" class="text-white">Continents</a>
            </li>
            <li class="breadcrumb-item">
              <a href="#" class="text-white">Countries</a>
            </li>
            <li class="breadcrumb-item">
              <a href="#" class="text-white">India</a>
            </li>
            <li class="breadcrumb-item">
              <a href="#" class="text-white">Noida</a>
            </li>
            <li class="breadcrumb-item active">
                GeeksforGeeks
            </li>
        </ul>
    </div>
</body>
</html>


Output:

Output

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



Last Updated : 13 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads