We can create different types of Bootstrap tables by using different classes to style them.The basic Bootstrap table has a light padding and only horizontal dividers. The .table class is used to add basic styling to a table.
The .table
class adds basic styling to a table:
The .table-striped
class adds zebra-stripes to a table:
The .table-bordered
class adds borders on all sides of the table and cells:
The .table-hover
class adds a hover effect (grey background color) on table rows:
The .table-condensed
class makes a table more compact by cutting cell padding in half:
Contextual classes can be used to color table rows (<tr>
) or table cells (<td>
):
The .table-responsive
class creates a responsive table. The table will then
scroll horizontally on small devices (under 768px). When viewing on anything
larger than 768px wide, there is no difference: