Bootstrap Thumbnails

This chapter will explain Bootstrap thumbnails. Most websites need to layout images, videos, text, etc. in a grid. Bootstrap provides an easy way to do this with thumbnails. The steps to create a thumbnail with Bootstrap are as follows:

• Add a class around the image.thumbnailof the <a> tag.
• This adds four pixels of padding and a gray border.
• When the mouse hovers over the image, the outline of the image is displayed with animation.

The following example demonstrates the default thumbnail:

The result is as follows:

Add custom content

Now that we have a basic thumbnail, we can add various HTML content to the thumbnail, such as headings, paragraphs, or buttons. The specific steps are as follows:

• Change the tag with class.thumbnailof the <a> tag to <div>.
• Inside the <div>, you can add anything you want. Since this is a <div>, we can use the default span-based naming convention to adjust the size.
• If you want to group multiple images, place them in an unordered list, and each list item floats to the left.

The following example demonstrates this:

The result is as follows: