Prev Page
Next Page  
Bootstrap Images
The bootstrap image classes you can easily style images such as making the round cornered,  circular images, and thumbnails.

.img-rounded : border-radius:6px to give the image rounded corners.

.img-circle : The entire image round by adding border-radius:150px.

.img-thumbnail : adds a bit of padding and a gray border in image thumbnail.
Example :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Bootstrap Images</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
 <div class="row" style="padding:15px;">
    
    <img src="images/bt-image.jpg" class="img-rounded" alt="Rounded Image">
    <img src="images/bt-image.jpg" class="img-circle" alt="Circular Image">
    <img src="images/bt-image.jpg" class="img-thumbnail" alt="Thumbnail Image">
   
</div>
 
</body>
</html>
Output :
Rounded Image Circular Image Thumbnail Image
Image Responsive
The bootstrap images responsive class is .img-responsive to the <img> tag. This class mainly applies the styles max-width:100%; and height:auto; to the image so that it scales nicely to fit the containing element 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Bootstrap Image Responsive</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
 <div class="row" align="center">
    
    <img src="images/img-responsive.jpg" class="img-responsive" alt="Responsive Images">
   
</div>
 
</body>
</html>
Output :
Image Responsive
  Prev Page
Next Page