In this tutorial we will learn how to make images responsive in Bootstrap with examples.
Bootstrap provides various classes for images to improve their appearance and make them responsive. Trying to make an image responsive implies that it needs to scale in accordance with its parent element. That is, the image’s size must not be greater than its parent’s size, and it needs to expand and reduce in proportion to its parent’s size without having lost its aspect ratio.
The image classes offered in Bootstrap are as follows:
1. .img-responsive class: Responsive images in Bootstrap are formed by updating the.img-responsive class to the img tag. The following .img-responsive class is applied to the image: display: block, height: auto and max-width: 100%.
HTML Code:
<!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>
To see the effect, change the size of the browser window.
</p>
<img src=
"https://static.javatpoint.com/images/logo/jtp_logo.png"
class="img-responsive" alt="jtp_logo"
width="307" height="240"/>
</div>
</body>
</html>Output:
2. .img-fluid class: Include the.img-fluid class in the tag. The.img-fluid class is applied to the image, with the following settings: max-width: 100% | height: auto.
HTML Code:
!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>
To see the effect, change the size of the browser window.
</p>
<img src=
"https://static.javatpoint.com/images/logo/jtp_logo.png"
class="img-fluid" alt="Responsive Image"
width="307" height="240"/>
</div>
</body>
</html>Output:
3. .img-rounded class:img-rounded class adds rounded edges to an image. (IE8 does not support rounded corners.)
HTML Code:
<!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://img.freepik.com/free-psd/packaging-box-concept-mock-up_23-2148698796.jpg?w=2000"
class="img-rounded" alt="Responsive Image"
width="307" height="240"/>
</div>
</body>
</html> Output:
4. .img-circle class:img-circle class transforms the image’s structure into a circle.
HTML Code:
<!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://img.freepik.com/free-psd/packaging-box-concept-mock-up_23-2148698796.jpg?w=2000"
class="img-circle" alt="Responsive Image"
width="307" height="240"/>
</div>
</body>
</html>Output:
5. .img-thumbnail class: The .img-thumbnail class is responsible for transforming the image into a thumbnail.
HTML Code:
<!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://img.freepik.com/free-psd/packaging-box-concept-mock-up_23-2148698796.jpg?w=2000"
class="img-thumbnail" alt="Responsive Image"
width="307" height="240">
</div>
</body>
</html>Output:
Browsers that are supported:
- Chrome by Google
- Microsoft Internet Explorer
- Safari
- Firefox
- Opera
Leave a Reply