Open In App

Responsive images in Bootstrap with Examples

Last Updated : 12 Jun, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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:

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



Next Article

Similar Reads