Responsive images in Bootstrap with Examples

Last Updated : 12 Jun, 2024

Responsive images in Bootstrap adjust automatically to fit different screen sizes, Bootstrap provides utilities to create responsive images that adapt to various screen sizes. By applying the img-fluid class, images scale proportionally within their parent containers, ensuring optimal viewing on different devices.

The different classes available in Bootstrap for images are explained below:

Table of Content

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 rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Link Bootstrap JS and JQuery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
</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>

        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240612085712/image.png" 
             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 rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Link Bootstrap JS and JQuery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
</head>

<body>
    <div class="container">
        <h3>.img-fluid class</h3>

        <p>
            Change the size of the browser window
            to see effect.
        </p>

        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240612085712/image.png" 
             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 the .img-rounded class. (Rounded corners are not supported by IE8.)

HTML 
<!DOCTYPE html>
<html>

<head>
    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Link Bootstrap JS and JQuery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
</head>

<body>
    <div class="container">
        <h3>.img-rounded class</h3>

        <p>Rounded Corners</p>

        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240612085712/image.png" 
             class="img-rounded"
             alt="Responsive Image" 
             width="307" 
             height="240" />
    </div>
</body>

</html>

Output:

image rounded class.img-circle class:

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

HTML 
<!DOCTYPE html>
<html>

<head>
    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Link Bootstrap JS and JQuery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
</head>

<body>
    <div class="container">
        <h3>.img-circle class </h3>

        <p>Circle</p>

        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240612085712/image.png" 
             class="img-circle" 
             alt="Responsive Image"
             width="307" 
             height="240" />
    </div>
</body>

</html>

Output:

image circle class.img-thumbnail class:

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

HTML 
<!DOCTYPE html>
<html>

<head>
    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Link Bootstrap JS and JQuery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
</head>

<body>
    <div class="container">
        <h3>.img-thumbnail class</h3>

        <p>Thumbnail</p>

        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240612085712/image.png" 
             class="img-thumbnail"
             alt="Responsive Image" 
             width="307" 
             height="240">
    </div>
</body>

</html>

Output:

image thumbnail class

Comment

Explore