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 bootstrapStep 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: The custom scss file name is “custom.scss” and "custom.css" is the converted file
Syntax:
$variable:value;
@import "https://www.geeksforgeeks.org/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
$table-cell-padding-y:1rem;
$table-cell-padding-x:7rem;
$table-cell-padding-y-sm:0.8rem;
$table-cell-padding-x-sm:2rem;
$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.
table {
caption-side: bottom;
border-collapse: collapse;
}
caption {
padding-top: 1rem;
padding-bottom: 1rem;
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: 1rem;
color: var(--bs-table-color);
vertical-align: top;
border-color: var(--bs-table-border-color);
}
.table-sm > :not(caption) > * > * {
padding: 0.8rem 2rem;
}
.table-bordered > :not(caption) > * {
border-width: 6px 0;
}
.table-bordered > :not(caption) > * > * {
border-width: 0 6px;
}
index.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">
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:
Example 2: In this example, make use of some of the above-mentioned variables. Their default values are changed.
custom.scss:
$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.
.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: 1rem;
color: var(--bs-table-color);
vertical-align: top;
border-color: var(--bs-table-border-color);
}
index.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">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:
Example 3: In this example, make use of some of the above-mentioned variables. Their default values are changed.
custom.scss
$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
.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: 1rem;
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:
<!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">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:
Reference: https://getbootstrap.com/docs/5.0/content/tables/#sass