Bootstrapi õppimise teine päev

Striped rows

The .table-striped class adds zebra-stripes to a table:

Firstname Lastname Email
Joe Doe Mary@example.com
Bogdan Sergachev bsergachev@gmail.com
July Dooley Jyly@example.com

Bordered table

The .table-bordered class adds borders on all of the table and cells

Firstname Lastname Email
Joe Doe Mary@example.com
Bogdan Sergachev bsergachev@gmail.com
July Dooley Jyly@example.com

Hover Rows

The .table-hover class adds a hover effect (grey background-color) on table rows


Firstname Lastname Email
Joe Doe Mary@example.com
Bogdan Sergachev bsergachev@gmail.com
July Dooley Jyly@example.com

Condensed table

The .table-condensed class make a table more compact by cutting cell padding in half

Firstname Lastname Email
Joe Doe Mary@example.com
Bogdan Sergachev bsergachev@gmail.com
July Dooley Jyly@example.com

Responsive tables

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

Rounded Corners

The .img-rounded class adds Rounded Corners to an image (not available in IE8)

image rounded

Circle

The .img-circle class shapes the image to a circle (IE8 does not support rounded cornerd)

Circle

Thumbnail

The .img-thumbnail class shapes the image to a thumbnail

Thumbnail

Responsive images

The .img-responsive class applied display: block; and max-width: 100%; and height: auto; to the image

Responsive image

Image Gallery

You can also use bootstrap's grid system in conjunction with the .thumbnail class to create an image gallery

Responsive Embed

Create a responsive video and scale it nicely to the parent element with an 16:9 aspect ratio

Aspect ratio 4:3

Aspect ratio 16:9