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.

Suggest An Answer

No suggestions Available!