Bootstrap 5 Table SASS
Last Updated :
30 Jan, 2023
Bootstrap 5 Table SASS can be used to change the default values provided for the table by customizing scss file.
SASS variables of Table:
- $table-cell-padding-y: This variable provides the top and bottom padding of the table cell. By default, it is 0.5rem.
- $table-cell-padding-x: This variable provides the left and right padding of the table cell. By default, it is 0.5rem.
- $table-cell-padding-y-sm: This variable provides the top and bottom padding of the table cell of a small table. By default, it is 0.25rem.
- $table-cell-padding-x-sm: This variable provides the left and right padding of the table cell of a small table. By default, it is 0.25rem.
- $table-cell-vertical-align: This variable provides the vertical alignment of the table cell. By default, it is top.
- $table-color: This variable provides the text color of the table. By default, it is a gray color.
- $table-bg: This variable provides the background color of the table. By default, it is transparent.
- $table-accent-bg: This variable provides the accent background color of the table. By default, it is transparent.
- $table-th-font-weight: This variable provides the font weight of the table header. By default, it is null.
- $table-striped-color: This variable provides the text color of the striped rows in the table. By default, it is a gray color.
- $table-striped-bg-factor: This variable provides the contrast of the background color in the striped table. By default, it is 0.05.
- $table-striped-bg: This variable provides the background color of the striped table. By default, it is black color with a contrast of 0.05.
- $table-active-color: This variable provides the text color of the active table. By default, it is a gray color.
- $table-active-bg-factor: This variable provides the contrast of the background color in the active table. By default, it is 0.1.
- $table-active-bg: This variable provides the background color for the active table. By default, it is black color with a contrast of 0.1.
- $table-hover-color: This variable provides the text color for the table with the hover state. By default, it is a gray color.
- $table-hover-bg-factor: This variable provides the contrast of the background color of the table with the hover state. By default, it is 0.075.
- $table-hover-bg: This variable provides the background color of the table with a hover state. By default, it is black color with a contrast of 0.075.
- $table-border-factor: This variable provides the contrast of the table border. By default, it is 0.1.
- $table-border-width: This variable provides the border width of the table. By default, it is 1px.
- $table-border-color: This variable provides the border color of the table. By default, it is a gray color.
- $table-striped-order: This variable provides the order of the strips in a striped table. By default, it is odd.
- $table-group-separator-color: This variable provides the color of the group separator in the table. By default, it is the color of the parent element.
- $table-caption-color: This variable provides the text color of the table caption. By default, it is a gray color.
- $table-bg-scale: This variable provides the grayscale of the background color of the table. By default, it is -80%.
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, make use of some of the above-mentioned variables. Their default values are changed.
custom.scss
CSS
$table-cell-padding-y: 1 rem;
$table-cell-padding-x: 7 rem;
$table-cell-padding-y-sm: 0.8 rem;
$table-cell-padding-x-sm: 2 rem;
$table- color : white ;
$table-accent-bg: green ;
$table-th- font-weight : 800 ;
$table-striped- color : green ;
$table-striped-bg-factor: 0.3 ;
$table-striped-bg: white ;
$table- border-width : 6px ;
$table- border-color : black ;
$table-caption- color : green ;
@import "./node_modules/bootstrap/scss/bootstrap"
|
CSS file created after conversion
custom.css: This file is used in the above HTML file.
CSS
table {
caption-side : bottom ;
border-collapse : collapse ;
}
caption {
padding-top : 1 rem;
padding-bottom : 1 rem;
color : green ;
text-align : left ;
}
.table {
--bs-table- color : white ;
--bs-table-bg: transparent ;
--bs-table- border-color : black ;
--bs-table-accent-bg: green ;
--bs-table-striped- color : green ;
--bs-table-striped-bg: white ;
--bs-table-active- color : white ;
--bs-table-active-bg: rgba( 0 , 0 , 0 , 0.1 );
--bs-table-hover- color : white ;
--bs-table-hover-bg: rgba( 0 , 0 , 0 , 0.075 );
width : 100% ;
margin-bottom : 1 rem;
color : var(--bs-table-color);
vertical-align : top ;
border-color : var(--bs-table-border-color);
}
.table-sm > :not( caption ) > * > * {
padding : 0.8 rem 2 rem;
}
.table-bordered > :not( caption ) > * {
border-width : 6px 0 ;
}
.table-bordered > :not( caption ) > * > * {
border-width : 0 6px ;
}
|
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 Table SASS</ title >
< link href =
rel = "stylesheet" >
< link rel = "stylesheet" href = "./custom.css" >
< script src =
</ script >
< script src =
</ script >
</ head >
< body class = "text-center" >
< div class = "container" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< div class = "container" >
< p >Striped table</ p >
< table class="table table-striped
table-bordered">
< caption >Table caption</ caption >
< thead >
< tr >
< th >Subject</ th >
< th >Roll number</ th >
< th >Mark</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >Java</ td >
< td >77</ td >
< td >75</ td >
</ tr >
< tr >
< td >C++</ td >
< td >81</ td >
< td >90</ td >
</ tr >
< tr >
< td >HTML & CSS</ td >
< td >2</ td >
< td >70</ td >
</ tr >
</ tbody >
</ table >
< p >Small table</ p >
< table class="table table-bordered
table-sm">
< thead >
< tr >
< th >Subject</ th >
< th >Roll number</ th >
< th >Mark</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >Java</ td >
< td >77</ td >
< td >75</ td >
</ tr >
< tr >
< td >C++</ td >
< td >81</ td >
< td >90</ td >
</ tr >
< tr >
< td >HTML & CSS</ td >
< td >2</ td >
< td >70</ td >
</ tr >
</ tbody >
</ table >
< p >Table with active row</ p >
< table class = "table table-bordered" >
< thead >
< tr >
< th >Subject</ th >
< th >Roll number</ th >
< th >Mark</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >Java</ td >
< td >77</ td >
< td >75</ td >
</ tr >
< tr class = "table-active" >
< td >C++</ td >
< td >81</ td >
< td >90</ td >
</ tr >
< tr >
< td >HTML & CSS</ td >
< td >2</ td >
< td >70</ td >
</ tr >
</ tbody >
</ table >
</ div >
</ div >
</ body >
</ html >
|
Output:
Output
Example 2: In this example, make use of some of the above-mentioned variables. Their default values are changed.
custom.scss:
CSS
$table-active- color : white ;
$table-active-bg: green ;
$table-active-bg-factor: 0.8 ;
$table-hover- color : white ;
$table-hover-bg-factor: 0.59 ;
$table-hover-bg: green ;
@import "./node_modules/bootstrap/scss/bootstrap"
|
CSS file created after conversion
custom.css: This file is used in the above HTML file.
CSS
.table {
--bs-table- color : var(--bs-body-color);
--bs-table-bg: transparent ;
--bs-table- border-color : var(--bs-border-color);
--bs-table-accent-bg: transparent ;
--bs-table-striped- color : var(--bs-body-color);
--bs-table-striped-bg: rgba( 0 , 0 , 0 , 0.05 );
--bs-table-active- color : white ;
--bs-table-active-bg: green ;
--bs-table-hover- color : white ;
--bs-table-hover-bg: green ;
width : 100% ;
margin-bottom : 1 rem;
color : var(--bs-table-color);
vertical-align : top ;
border-color : var(--bs-table-border-color);
}
|
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 Table SASS</ title >
< link href =
rel = "stylesheet" >
< link rel = "stylesheet" href = "./custom.css" >
< script src =
</ script >
< script src =
</ script >
</ head >
< body class = "text-center" >
< div class = "container" >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< div class = "container" >
< p >Table with active row</ p >
< table class = "table table-bordered" >
< thead >
< tr >
< th >Subject</ th >
< th >Roll number</ th >
< th >Mark</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >Java</ td >
< td >77</ td >
< td >75</ td >
</ tr >
< tr class = "table-active" >
< td >C++</ td >
< td >81</ td >
< td >90</ td >
</ tr >
< tr >
< td >HTML & CSS</ td >
< td >2</ td >
< td >70</ td >
</ tr >
</ tbody >
</ table >
< div class = "container pt-3" >
< p >Hover table</ p >
< table class = "table table-hover" >
< thead >
< tr >
< th >Subject</ th >
< th >Roll number</ th >
< th >Mark</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >Java</ td >
< td >77</ td >
< td >75</ td >
</ tr >
< tr >
< td >C++</ td >
< td >81</ td >
< td >90</ td >
</ tr >
< tr >
< td >HTML & CSS</ td >
< td >2</ td >
< td >70</ td >
</ tr >
</ tbody >
</ table >
< table class="table table-success
table-hover">
< thead >
< tr >
< th >Subject</ th >
< th >Roll number</ th >
< th >Mark</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >Java</ td >
< td >77</ td >
< td >75</ td >
</ tr >
< tr >
< td >C++</ td >
< td >81</ td >
< td >90</ td >
</ tr >
< tr >
< td >HTML & CSS</ td >
< td >2</ td >
< td >70</ td >
</ tr >
</ tbody >
</ table >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Output
Example 3: In this example, make use of some of the above-mentioned variables. Their default values are changed.
custom.scss
CSS
$table- border-width : 6px ;
$table- border-color : black ;
$table-border-factor: 0.40 ;
$table- color : white ;
$table-bg: green ;
$table-bg-scale: 16% ;
@import "./node_modules/bootstrap/scss/bootstrap"
|
CSS file created after conversion
custom.css: This file is used in the above file
CSS
.table {
--bs-table- color : white ;
--bs-table-bg: green ;
--bs-table- border-color : black ;
--bs-table-accent-bg: transparent ;
--bs-table-striped- color : white ;
--bs-table-striped-bg: rgba( 0 , 0 , 0 , 0.05 );
--bs-table-active- color : white ;
--bs-table-active-bg: rgba( 0 , 0 , 0 , 0.1 );
--bs-table-hover- color : white ;
--bs-table-hover-bg: rgba( 0 , 0 , 0 , 0.075 );
width : 100% ;
margin-bottom : 1 rem;
color : var(--bs-table-color);
vertical-align : top ;
border-color : var(--bs-table-border-color);
}
.table-bordered > :not( caption ) > * {
border-width : 6px 0 ;
}
.table-bordered > :not( caption ) > * > * {
border-width : 0 6px ;
}
|
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 Table SASS</ title >
< link href =
rel = "stylesheet" >
< link rel = "stylesheet" href = "./custom.css" >
< script src =
</ script >
< script src =
</ script >
</ head >
< body class = "text-center" >
< div class = "container" >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< div class = "container" >
< table class = "table table-bordered" >
< thead >
< tr >
< th >Subject</ th >
< th >Roll number</ th >
< th >Mark</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >Java</ td >
< td >77</ td >
< td >75</ td >
</ tr >
< tr >
< td >C++</ td >
< td >81</ td >
< td >90</ td >
</ tr >
< tr >
< td >HTML & CSS</ td >
< td >2</ td >
< td >70</ td >
</ tr >
</ tbody >
</ table >
< div class = "container pt-3" >
< table class = "table table-success" >
< thead >
< tr >
< th >Subject</ th >
< th >Roll number</ th >
< th >Mark</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >Java</ td >
< td >77</ td >
< td >75</ td >
</ tr >
< tr >
< td >C++</ td >
< td >81</ td >
< td >90</ td >
</ tr >
< tr >
< td >HTML & CSS</ td >
< td >2</ td >
< td >70</ td >
</ tr >
</ tbody >
</ table >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Output
Reference: https://getbootstrap.com/docs/5.0/content/tables/#sass
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...