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
.img-fluid class:
.img-rounded class:
.img-circle class:
.img-thumbnail class:

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:

.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:

.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:

.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:

.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

Borders in bootstrap with examples

MeghaKakkar

Improve

Article Tags :

Responsive images in Bootstrap with Examples

img-responsive class

.img-fluid class:

.img-rounded class:

.img-circle class:

.img-thumbnail class:

Similar Reads

Thank You!

What kind of Experience do you want to share?