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.
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: