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
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.2 rem;
@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 : 1 rem;
--bs-breadcrumb- font-size : 1.25 rem;
--bs-breadcrumb-bg: ;
--bs-breadcrumb-border-radius: ;
--bs-breadcrumb-divider- color : green ;
--bs-breadcrumb-item-padding-x: 1.2 rem;
--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, "+" )
;
}
|
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.2 rem;
@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 : 1 rem;
--bs-breadcrumb- font-size : 1.25 rem;
--bs-breadcrumb-bg: green ;
--bs-breadcrumb-border-radius: 40px ;
--bs-breadcrumb-divider- color : white ;
--bs-breadcrumb-item-padding-x: 1.2 rem;
--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, "&" )
;
}
|
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
Share your thoughts in the comments
Please Login to comment...