Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Responsive images in Bootstrap with Examples

  • Last Updated : 27 Dec, 2021

Bootstrap offers different classes for images to make their appearance better and also to make them responsive. Making an image responsive means that it should scale according to its parent element. That is, the size of the image should not overflow it’s parent and will grow and shrink according to the change in the size of its parent without losing its aspect ratio.
The different classes available in Bootstrap for images are as explained below: 

  • .img-responsive class: Responsive images in Bootstrap are created by adding .img-responsive class to img tag. An img-responsive class applies: max-width: 100% | height:auto | display:block onto the image. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <!-- Link Bootstrap CSS -->
     
    <!-- Link Bootstrap JS and JQuery -->
</head>
 
<body>
    <div class="container">
        <h1>Responsive Image </h1>
        <br>
 
        <h3>.img-responsive class</h3>
 
         
 
<p>
            Change the size of the browser window
            to see effect
        </p>
 
 
 
             class="img-responsive" alt="Responsive image"
             width="307" height="240" />
    </div>
</body>
 
</html>
  • Output: 

image responsive class

  • .img-fluid class: Add .img-fluid class to tag. The .img-fluid class applies : max-width: 100% | height: auto onto the image. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <!-- Link Bootstrap CSS -->
     
    <!-- Link Bootstrap JS and JQuery -->
</head>
 
<body>
    <div class="container">
        <h3>.img-fluid class</h3>
 
         
 
<p>
            Change the size of the browser window
            to see effect.
        </p>
 
 
         
             class="img-fluid"  alt="Responsive Image"
             width="307" height="240" />
    </div>
 
</body>
 
</html>
  • Output: 

image fluid class

  • .img-rounded class: The rounded corners to an image are added by .img-rounded class. (Rounded corners are not supported by IE8.)

HTML




<!DOCTYPE html>
<html>
 
<head>
    <!-- Link Bootstrap CSS -->
     
    <!-- Link Bootstrap JS and JQuery -->
</head>
 
<body>
    <div class="container">
 
        <h3>.img-rounded class</h3>
 
         
 
<p>Rounded Corners</p>
 
 
 
             class="img-rounded" alt="Responsive Image"
             width="307" height="240" />
    </div>
 
</body>
 
</html>
  • Output: 

image rounded class

  • .img-circle class: The shape of image is made circle by .img-circle class.(Rounded corners are not supported by IE8.)

HTML




<!DOCTYPE html>
<html>
 
<head>
    <!-- Link Bootstrap CSS -->
     
    <!-- Link Bootstrap JS and JQuery -->
</head>
 
<body>
    <div class="container">
 
        <h3>.img-circle class </h3>
 
         
 
<p>Circle</p>
 
 
         
             class="img-circle" alt="Responsive Image"
             width="307" height="240" />
    </div>
</body>
 
</html>
  • Output: 

image circle class

  • .img-thumbnail class: Shaping of image to a thumbnail is done by the .img-thumbnail class.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <!-- Link Bootstrap CSS -->
     
    <!-- Link Bootstrap JS and JQuery -->
</head>
 
<body>
    <div class="container">
        <h3>.img-thumbnail class</h3>
 
         
 
<p>Thumbnail</p>
 
 
         
             class="img-thumbnail" alt="Responsive Image"
             width="307" height="240">
</body>
 
</html>
  • Output: 

image thumbnail class

Supported Browser:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari
     

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!