Bootstrap 4 provides classes to style images responsively, including responsive images that automatically adjust the size based on screen width, image shapes such as rounded or circular, and image thumbnails with optional borders and captions, facilitating flexible and attractive image layouts.
The different classes available in Bootstrap for images are explained below:
Table of Content
Responsive Images
The .img-fluid class is used within the <img> tag to create the responsive image. The responsive image is used to adjust the image automatically to the specified box.
Syntax:
<img src="https://www.geeksforgeeks.org/image_source" class="img-fluid" ...>Example: In this example we demonstrates Bootstrap 4's responsive image feature, using the 'img-fluid' class to ensure the image scales appropriately based on screen size.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Images</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
<style>
.custom-img {
width: 600px !important;
height: 180px !important;
}
</style>
</head>
<body style="text-align:center;">
<div class="container">
<h2>Responsive Image</h2>
<img class="img-fluid custom-img"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240611121643/responsive-image.png"
alt="Responsive image" />
</div>
</body>
</html>
Output:
Rounded Corners Image
The .rounded class is used to create a rounded corner image. This class is used with <img> tag.
Syntax:
<img src="https://www.geeksforgeeks.org/image_source" class="rounded" ...>Example: In this example we use Bootstrap 4's 'rounded' class to create a rounded corner image, providing a visually appealing presentation for the image element.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Images</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body style="text-align:center;">
<div class="container">
<h2>Rounded Corner Image</h2>
<img class="rounded"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240611122859/
responsiveImageOutput.png"
alt="Responsive image"
width="367"
height="340" />
</div>
</body>
</html>
Output:
Circle Image
The .rounded-circle class is used to create the circle shape image.
Syntax:
<img src="https://www.geeksforgeeks.org/image_source" class="rounded-circle" ...>Example: In this example we are using Bootstrap 4's rounded-circle class to render a circular image, offering a visually distinct presentation for the image element.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Images</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body style="text-align:center;">
<div class="container">
<h2>Circle Image</h2>
<img class="rounded-circle"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240611122859/
responsiveImageOutput.png"
alt="Responsive image"
width="467"
height="340" />
</div>
</body>
</html>
Output:
Thumbnail Image
The .img-thumbnail class is used to create a thumbnail (bordered) image.
Syntax:
<img src="https://www.geeksforgeeks.org/image_source" class="img-thumbnail" ...>Example: In this example we are using Bootstrap 4's img-thumbnail class to display a thumbnail image, providing a bordered and visually highlighted presentation for the image element.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Images</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body style="text-align:center;">
<div class="container">
<h2>Thumbnail Image</h2>
<img class="img-thumbnail" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240611123517/image.png"
alt="Responsive image"
width="467"
height="340" />
</div>
</body>
</html>
Output:
Aligning Image
The .float-left and .float-right class is used to set the left and right alignment of the image.
Syntax:
<img src="https://www.geeksforgeeks.org/image_source" class="float-left/float-right" ...>Example: In this example we are using Bootstrap 4's float-left and float-right classes to align images to the left and right sides, respectively, within the container.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Images</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body style="text-align:center;">
<div class="container">
<h2>Aligning Image</h2>
<!-- Bootstrap float-left class -->
<img class="float-left"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240611123517/image.png"
alt="Responsive image"
width="250"
height="250" />
<!-- Bootstrap float-right class -->
<img class="float-right"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240611123517/image.png"
alt="Responsive image"
width="250"
height="250" />
</div>
</body>
</html>
Output:
Centered Image
The .mx-auto (margin:auto) and .d-block (display:block) classes are used to set the image into center.
Syntax:
<img src="https://www.geeksforgeeks.org/image_source" class="mx-auto d-block" ...>Example: In this example we are using Bootstrap 4's mx-auto and d-block classes to horizontally center an image within the container.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Images</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h2 style="text-align:center;">Centered Image</h2>
<img class="mx-auto d-block"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240611123517/image.png"
alt="Responsive image"
/>
</div>
</body>
</html>
Output:
