Bootstrap TablesWe can create different types of Bootstrap tables by using different classes to style them. Bootstrap Basic Table:The basic Bootstrap table has a light padding and only horizontal dividers. The .table class is used to add basic styling to a table. Example: Bootstrap Striped Rows Table:The .table-striped class is used to add zebra-stripes to a table: Bootstrap Bordered table:The .table-bordered class is used to add borders on all sides of the table and cells: Bootstrap Hover rows Table:The .table-hover class is used to enable a hover state on table rows: Bootstrap Condensed table:The .table-condensed class is used to make a table more compact by cutting cell padding in half: Bootstrap Contextual classes:.Contextual classes are used to color table rows ( | |
): |
Class | Description |
---|---|
.active | It is used to apply the hover color to the table row or table cell |
.success | It indicates a successful or positive action |
.info | It indicates a neutral informative change or action |
.warning | It specifies a warning that might need attention |
.danger | It indicates a dangerous or potentially negative action |
Example:
The .table-responsive class is used to create a responsive table. You can open the responsible table even on small devices (under 768px). Then the table will be scrolled horizontally. Displays larger than 768px wide, there is no difference.
See this example: