Thumbnails

Thumbnails

The thumbnails in Bootstrap are covered in this chapter. Many websites require a means to arrange photos, videos, text, and other content in a grid, and Bootstrap makes this simple using thumbnails. To make thumbnails with Bootstrap, wrap an image in an a> tag with the class.thumbnail.

This adds a grey border and four pixels of padding.

On hover, the picture is outlined with an animated light.

A default thumbnail is shown in the example below.

OUTPUT :

Customizing Content

Now that we have a basic thumbnail, we can add any type of HTML text to it, such as headers, paragraphs, or buttons. Follow the instructions outlined below.

Change the a> tag with the.thumbnail class to a div>.

You may put anything you want inside that div>. We can use the normal span-based naming approach for scaling because this is a div>.

If you wish to combine several photos together, create an unordered list with each item floating to the left.

This is demonstrated in the following example:

OUTPUT :