Bootstrap Thumbnail - Bootstrap

What are thumb nails in Bootstrap?

This section debates round Bootstrap thumbnails. A lot of places need a way to lay out images, videos, text, etc, in a grid, and Bootstrap has an easy way to do this with thumbnails. To make thumbnails using Bootstrap −

  • Add an <a> tag with the class of .thumbnail around an image.
  • This adds four pixels of padding and a gray border.
  • On hover, an animated glow outlines the image.

The next instance shows a default thumbnail –


How to add Custom Content?

Adding Custom Content

Currently that we have a simple thumbnail, it's likely to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails. Keep an eye on the steps below −

  • Alter the <a> tag that has a class of .thumbnail to a <div>.
  • Inside of that <div>, you can add whatever you need. As this is a <div>, we can use the default span-based naming convention for sizing.
  • If you want to cluster multiple images, place them in an unordered list, and each list item will be floated to the left.

The next instance proves this –

Adding Custom Thumbnail

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

Bootstrap Topics