Bootstrap 5 Table SASS
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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel = "stylesheet" > < link rel = "stylesheet" href = "./custom.css" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" > </ script > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </ script > </ head > < body class = "text-center" > < div class = "container" > < h1 class = "text-success" > w3wiki </ 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:
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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel = "stylesheet" > < link rel = "stylesheet" href = "./custom.css" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" > </ script > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </ script > </ head > < body class = "text-center" > < div class = "container" > < h1 class = "text-success" >w3wiki</ 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:
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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel = "stylesheet" > < link rel = "stylesheet" href = "./custom.css" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" > </ script > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </ script > </ head > < body class = "text-center" > < div class = "container" > < h1 class = "text-success" >w3wiki</ 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:
Reference: https://getbootstrap.com/docs/5.0/content/tables/#sass
Contact Us