Explain Bootstrap 4 Tables?
A Bootstrap 4 table has very light padding and has a horizontal divider. The class .table gives primary styling to a table.
- Striped Rows:- The class .table-striped gives the zebra-stripes to a table.
- Bordered Table:- The class .table-bordered gives borders on all the four sides of the table and between the cells.
- Hover Rows:- The class .table-hover gives a grey background color or a hover effect on the rows of the table.
- Dark Striped Table:- .table-dark & .table-striped are combined to create a dark and striped table.
- Borderless Table:- The class .table-borderless removes the borders all from all the four sides of the table and between the cells.
- Contextual Classes:- Contextual classes are used to color the entire table (<table>) or rows of the table (<tr>) or cells of the table (<td>). Some of the contextual classes are:-
1 .table-primary—it is blue in color, and it shows a significant action.
2 .table-success-it is green in color, and it shows a successful or a positive action
3 .table-warning -it is orange in color and it shows a warning and needs attention.
- Table Head Colors:- The class .thead-dark gives a dark black background to the headers of the table, and the class .thead-light gives the light grey color to the headers of the table
- Small table:- The class .table-sm makes the table small in size by cutting the cell padding in half.
- Responsive Tables:- The class .table-responsive creates a responsive table which means if needed, on the screens less than 992px wide, a horizontal scrollbar is added to the table and if the more than 992px then no difference.
This is one of the most asked Bootstrap 4 interview questions.