While a lot of layout in a website can be done with your grids, you don’t want to necessarily use grids to display tabular data.
Therefore, you want to use a table. Bootstrap has given us several CSS classes that we can use to easier layout our tables.
For basic styling, you will only want to add the table class to your table tag. Example:
From here, we can expand what we can do. Such as stripe your data:
Note: This will only stripe data rows within the tbody tag.
Want a border around your table and between your cells? Then you will want to use the .table-bordered class.
If you want to help users follow which row they are over, use the .table-hover class. This will put a light background color for any row that you are hovering over.
If you feel you have too much space between two or more cells/rows, you can use .table-condensed to shrink the padding around the cells. This will cut the padding down by about half.
Now, if you want to have a responsive table, then you need to wrap your table into a div, which should have a class of .table-responsive. What this will do is make the table scroll if the screen space becomes too small.
NOTE: This class goes on the div wrapping around the table, not the table itself.
...
Or watch on YouTube.
Bootstrap Tables was originally found on Access 2 Learn
