The selection of image classes available in Bootstrap includes:
- .img-responsive class: In Bootstrap, responsive images are achieved by applying the .img-responsive class to the img element. This class sets the image to display as a block, with automatic height adjustment and a maximum width of 100%.
HTML Code:
Example
<!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://images.logic practice.com/images/logo/jtp_logo.png"
class="img-responsive" alt="jtp_logo"
width="307" height="240"/>
</div>
</body>
</html>
Output:
Include the.img-fluid class within the tag to ensure the image is styled appropriately. This class sets the maximum width to 100% and adjusts the height automatically for responsive design.
HTML Code:
Example
<!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://images.logic practice.com/images/logo/jtp_logo.png"
class="img-fluid" alt="Responsive Image"
width="307" height="240"/>
</div>
</body>
</html>
Output:
Output
[Program Output]
The .img-rounded class applies circular borders to an image. (Internet Explorer 8 does not have compatibility for rounded corners.)
HTML Code:
Example
<!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:
Output
[Program Output]
The
- .img-circle class modifies the image's shape to a circular form.
HTML Code:
Example
<!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:
Output
[Program Output]
The .img-thumbnail class is utilized to convert the image into a thumbnail.
HTML Code:
Example
<!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:
Output
[Program Output]
Browsers that are supported:
- Chrome by Google
- Microsoft Internet Explorer
- Safari
- Firefox
- Opera
