How to use SASS/SCSS In Bootstrap
This method involves using SASS/SCSS to customize the default Bootstrap styling.
Firstly, create a styles.scss file with the code below.
// styles.scss
// Custom styles for zebra-striping
.table-striped-columns {
tbody {
td {
&:nth-child(odd) {
background-color: lightblue;
}
}
}
}
then, compile the file to styles.css with the below command and add it as the link to the HTML
sass styles.scss styles.css
Example: Illustration of the styling of the vertical zebra-striped table in Bootstrap 5
HTML
<!doctype html> < html lang = "en" > < head > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < link rel = "stylesheet" href = "main.css" > < title >Styling vertical zebra-striped table</ title > </ head > < body > < div class = "container" > < table class = "table table-striped-columns" > < thead > < tr > < th scope = "col" >ID</ th > < th scope = "col" >Name</ th > < th scope = "col" >Age</ th > </ tr > </ thead > < tbody > < tr > < td >1</ td > < td >John Doe</ td > < td >25</ td > </ tr > < tr > < td >2</ td > < td >Jane Doe</ td > < td >30</ td > </ tr > <!-- Add more rows as needed --> </ tbody > </ table > </ div > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ body > </ html > |
Output:
How to style Vertical Zebra-Striped Table in Bootstrap 5 ?
A Table where columns have two alternating colors enhances the readability of tables by providing a clear visual separation between columns. In Bootstrap 5, creating a vertically zebra-striped table can be achieved in several ways. This article will cover three different methods:
Table of Content
- Using SASS/SCSS
- The nth-child Selector
- Bootstrap Utility table-striped