Bootstrap 3 Essential Training, Exploring table styles

Tables are one of my favorite bootstrap styles because they take care of handling something that would be super difficult for you to do by yourself. You can see here on the left-hand side that I have a normal table and on the right, it doesn’t look that great.

Now, if I simply just add a class of table, our table looks a lot better and that’s because it’s adding a bit of padding as well as some underlines underneath each row. Bootstrap also provides a series of sub-classes that you can use to enhance the tables.  

So, for example, if we wanted striped rows, which means that every other row would have a different color, we can just add that as a class. And now every one of these is a different color. You can also add a border around the table by using table-bordered.

Hovering allows people to focus, especially when the rows are very long. We can add a table hover class for that. And when we hover each one of the rows, you can see that they highlight.  

You can get a version of the table that takes up a bit less space.

Leave a Reply

Notify of