Bootstrap - Thumbnails

Rubleen Kaur
Last Updated: May 13, 2022

Introduction

In this article, we will discuss Bootstrap -Thumbnails. In Bootstrap, thumbnails show linked images in a grid structure with minimal required markups. Bootstrap allows us to create these thumbnails that display linked images in grids with pre-defined classes. These classes help to reduce the length of the code. Thumbnails help us provide a glance of images using smaller versions of the media. Let's discuss how we can create a thumbnail and custom these. 

Creating a thumbnail

Let’s discuss the step by step for implementation of thumbnails in bootstraps,

Step 1: The first step is to include the Bootstrap and jQuery CDN into the head tag before having CSS's stylesheets.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

 

Step 2: We need to create a div tag in our HTML body. We will create three div sections for each image in this div tag. 

Step 3: We can add various col properties for making our page responsive, like col-sm-6 or col-md-3. 

Step 4: You need to create an anchor tag <a>, with a class name - .thumbnail wrapped around an image tag. 

Let’s see an example of how we can implement these steps,

<!DOCTYPE html>

<html>

   <head>

      <title>Coding ninjas example</title>

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

 

       </head>

   <body>

      <div class"row">

         <div class"col-sm-6 col-md-3">

            <a href"#" class"img-thumbnail">

               <img src"./cn.png" alt"thumbnail">

            </a>

         </div>

         <div class"col-sm-6 col-md-3">

            <a href"#" class"img-thumbnail">

               <img src"./cn.png" alt"thumbnail">

            </a>

         </div>

         <div class"col-sm-6 col-md-3">

            <a href"#" class"img-thumbnail">

               <img src"./cn.png" alt"Generic placeholder thumbnail">

            </a>

         </div>

      </div>

   </body>

</html>

 

OUTPUT

Now that we have created a simple thumbnail in HTML using Bootstrap, we can customize and add any content on the screen to make it look much better. Let's see how we can do that.

 

How to add custom content to our thumbnails?

So, we heard you want to customize your thumbnails? We got you! Just follow these steps to add any content in your thumbnail images and modify them. 

Step 1: You need to update the anchor tag to a new div tag, which has .thumbnail as a class.

Step 2: In this div tag, we can add any media or text. This div tag is used for a span-based naming convention for sizing.

Step 3: The only thing you need to keep in mind is that whatever content you add in the form of a group and place them in an unordered list, each item would be floated to the left by default. 
 

Let’s look at the example which demonstrates the above-given steps,

<!DOCTYPE html>

<html>

   <head>

      <title>Coding Ninja Demo</title>

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

 

   </head>

   <body>

      <div class"row">

         

         <div class"col-sm-6 col-md-3">

            <div class"img-thumbnail">

               <img src"./cn.png" alt"thumbnail">

            </div>

            <div class"caption">

               <h3>Thumbnail label</h3>

               <p>Some sample text. Some sample text.</p>

               <p>

                  <a href"#" class"btn btn-primary" role"button">

                     Button

                  </a>

                  <a href"#" class"btn btn-default" role"button">

                     Button

                  </a>

               </p>

            </div>

         </div>

         

         <div class"col-sm-6 col-md-3">

            <div class"img-thumbnail">

               <img src"./cn.png" alt"thumbnail">

            </div>

            <div class"caption">

               <h3>Thumbnail label</h3>

               <p>Some sample text. Some sample text.</p>

               <p>

                  <a href"#" class"btn btn-primary" role"button">

                     Button

                  </a>

                  <a href"#" class"btn btn-default" role =" button">

                     Button

                  </a>

               </p>

            </div>

         </div>

         

         <div class"col-sm-6 col-md-3">

            <div class"img-thumbnail">

               <img src"./cn.png" alt"thumbnail">

            </div>

            <div class"caption">

               <h3>Thumbnail label</h3>

               <p>Some sample text. Some sample text.</p>

               <p>

                  <a href"#" class"btn btn-primary" role"button">

                     Button

                  </a>

                  <a href"#" class"btn btn-default" role"button">

                     Button

                  </a>

               </p>

            </div>

         </div>

      </div>

   </body>

</html>

 

OUTPUT

 

Frequently Asked Questions

  1. What are Thumbnails in Bootstrap?
    In Bootstrap, thumbnails show linked images in a grid structure with minimal required markups. Thumbnails help us glance at images using smaller versions of the media.
     
  2. Which bootstrap class will you use to create an image thumbnail?
    In Bootstrap 4, we will use the img-thumbnail class. This class provides a border around the image.
     
  3. What is the use of a thumbnail?
    A thumbnail is a smaller version of media being portrayed on the screen, which can be easily viewed while browsing the entire webpage. 

Key Takeaways

Hey everyone, so let's brief about the article describing thumbnails and how we can use them in Bootstrap 4. If you want to learn more about Bootstrap and install it in your programs, do give this official documentation a read. 

  • This article covers how we can create a thumbnail in Bootstrap.
  • We have further discussed how easily we can add custom content to our thumbnails.
  • Further, we have seen a few frequently asked questions about the same.
     

Isn’t Web Development engaging? Building new websites and using amazing animations and different APIs, don’t be scared if you cannot grasp the hold of this vast development. We have the perfect web development course for you to make you stand out from your fellow developers. 

Happy Learning Ninjas!

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think