Bootstrap thumbnail

This chapter will explain Bootstrap thumbnails. Most sites require layout image, video, text, etc. in the grid. Bootstrap thumbnail for this provides an easy way. To use Bootstrap create thumbnails as follows:

• Add <a> around the image tag with theclass .thumbnail.
• This will add padding (padding) four pixels and a gray border.
• When the mouse hovers over the image, the animation will show the outline of an image.

The following example illustrates the default thumbnail:

The results are as follows:

Add custom content

Now that we have a basic thumbnail, we can add a variety of content to HTML thumbnails, such as headings, paragraphs, or buttons. Specific steps are as follows:

• The <a> label withclass .thumbnail changed <div>.
• In the <div> inside, you can add anything you want to add. Since this is a <div>, we can use the default naming rules based on span to adjust the size.
• If you want to group multiple images, please put them in an unordered list, and each list item left floating.

The following example illustrates this point:

The results are as follows: