Articles → BOOTSTRAP → Image Classes In Bootstrap

Image Classes In Bootstrap






Bootstrap Image Classes


  1. img-rounded - This class adds rounded corners to the image corner.
  2. img-circle - This class changes the shape of the image (on the webpage only) to circle.
  3. img-thumbnail - This class changes the shape of the image (on the webpage only) to thumbnail.

Example


<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container">
         <p>
            img-rounded example:
            <img src="http://gyansangrah.com/ArticleImages/microsoft_bot_framework_architecture_one.jpg" class="img-rounded" width="300" height="148" />
         </p>
         <p>
            img-circle example:
            <img src="http://gyansangrah.com/ArticleImages/microsoft_bot_framework_architecture_one.jpg" class="img-circle" width="300" height="148" />
         </p>
         <p>
            img-thumbnail example:
            <img src="http://gyansangrah.com/ArticleImages/microsoft_bot_framework_architecture_one.jpg" class="img-thumbnail" width="300" height="148" />
         </p>
      </div>
   </body>
</html>



Output


Picture showing the output of the image classes in bootstrap

Click to Enlarge


Image-Responsive Class




<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container">
         <p>
            img-rounded example:
            <img src="http://gyansangrah.com/ArticleImages/microsoft_bot_framework_architecture_one.jpg" class="img-responsive" />
         </p>
      </div>
   </body>
</html>


Picture showing the output of the image-responsive class in bootstrap

Click to Enlarge


Posted By  -  Karan Gupta
 
Posted On  -  Tuesday, September 7, 2021

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250