The .table-striped class adds zebra-stripes to a table:
Firstname | Lastname | |
---|---|---|
Joe | Doe | Mary@example.com |
Bogdan | Sergachev | bsergachev@gmail.com |
July | Dooley | Jyly@example.com |
The .table-bordered class adds borders on all of the table and cells
Firstname | Lastname | |
---|---|---|
Joe | Doe | Mary@example.com |
Bogdan | Sergachev | bsergachev@gmail.com |
July | Dooley | Jyly@example.com |
The .table-hover class adds a hover effect (grey background-color) on table rows
Firstname | Lastname | |
---|---|---|
Joe | Doe | Mary@example.com |
Bogdan | Sergachev | bsergachev@gmail.com |
July | Dooley | Jyly@example.com |
The .table-condensed class make a table more compact by cutting cell padding in half
Firstname | Lastname | |
---|---|---|
Joe | Doe | Mary@example.com |
Bogdan | Sergachev | bsergachev@gmail.com |
July | Dooley | Jyly@example.com |
The .table-responsive class creates a responsive table. THe table will them scroll horizontally on small devices
# | Firstname | Lastname | Age | City | Country |
---|---|---|---|---|---|
1 | Anna | Pitt | 35 | New York | USA |
The .img-rounded class adds Rounded Corners to an image (not available in IE8)
The .img-circle class shapes the image to a circle (IE8 does not support rounded cornerd)
The .img-thumbnail class shapes the image to a thumbnail
The .img-responsive class applied display: block; and max-width: 100%; and height: auto; to the image
You can also use bootstrap's grid system in conjunction with the .thumbnail class to create an image gallery
Create a responsive video and scale it nicely to the parent element with an 16:9 aspect ratio