Responsive images in Bootstrap with Examples

28 Apr, 2022
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 its 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 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/GG-2.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/GG-2.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/GG-2.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/GG-2.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/GG-2.png"            class="img-thumbnail" alt="Responsive Image"            width="307" height="240">    </div></body></html>
Output:
Supported Browser:
Google Chrome
Internet Explorer
Firefox
Opera
Safari
ysachin2314
rkbhola5
sahilintern
Picked
Web technologies
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to pass data into a bootstrap modal?
How to set Bootstrap Timepicker using datetimepicker library ?
How to align navbar items to the right in Bootstrap 4 ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?