---

Search posts under Bootstrap:

---

Thumbnail in Bootstrap

How to create linked images with thumbnail using Bootstrap?

Bootstrap thumbnail

Bootstrap's thumbnails are used to show linked images in grids with very minimum required markup, a thumbnail is created using class .thumbnail within the element <a>, The column grids are created using class .col-sm-* and .col-md-*, it is used to create grids of the images 

  <h3>Bootstrap thumbnails</h3>
    <div class="row">
        <div class="col-sm-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="apple.jpg" style="height:100px;" />
            </a>
        </div>
        <div class="col-sm-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="mango.png" style="height:100px;" />
            </a>
        </div>
        <div class="col-sm-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="gauva.jpg"style="height:100px;" />
            </a>
        </div>
        <div class="col-sm-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="pomegranate.jpg"style="height:100px;" />
            </a>
        </div>
    </div>

• In the above code snippet we have defined linked images using thumbnail.
• In the first line we have div section with class value as row and in that div we have created four div sections to create four images.
• We have taken div sections with class value as "col-sm-6" and "col-md-3" which creates  linked images in that space of the row.
• In the next line we have <a> tag with class value thumbnail to define the link of the image

output

Adding content in the thumbnails

 <h3>Adding content in the Bootstrap thumbnail </h3>
    <div class="row">
        <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
                <img src="apple.jpg" style="height:150px;" />
            </div>
            <div class="caption">
                <h3> Am Apple fruit</h3>
                <p>Delicious and crunchy apple fruit is one of the popular fruits containing an impressive list of antioxidants and essential nutrients required for good health</p>
                <p><a href="#" class="btn btn-success">Open</a></p>
            </div>
        </div>
        <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
                <img src="gauva.jpg" style="height:150px;" />
            </div>
            <div class="caption">
                <h3>Am guava fruit</h3>
                <p>Guavas (singular guava, /'gw??.v?/) are common tropical fruits cultivated and enjoyed in many tropical and subtropical regions. Psidium guajava  is a small tree in the Myrtle family</p>
                <p><a href="#" class="btn btn-warning">Close</a></p>
            </div>
        </div>
        <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
                <img src="mango.png" style="height:150px;" />
            </div>
            <div class="caption">
                <h3>Am mango fruit</h3>
                <p>Mango fruit (Mangifera indica) is one of the most popular, nutritionally rich tropical fruits with unique flavor, fragrance, taste, and heath promoting qualities</p>
                <p><a href="#" class="btn btn-danger">Click</a></p>
            </div>
        </div>
    </div>

Adding content to the images

• In the above code snippet we have added content in the thumbnails 
• In the first step we have created div section with class value as row.
• In the second step we created three div sections in one div with class value "col-sm-6 col-md-3"
• In the third step we created div with class value as thumbnail and we defined image, after creating image we have div with class value as caption to define the description of the images using <h3> and <p> 
• In the last step we have created buttons using <a> tag with class value as btn btn-succces, btn-primary and btn-warning