Centered Image
The .mx-auto (margin:auto) and .d-block (display:block) classes are used to set the image into center.
Syntax:
<img src="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.w3wiki.org/wp-content/uploads/20240611123517/image.png"
alt="Responsive image"
/>
</div>
</body>
</html>
Output:
Bootstrap 4 Images
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
- Rounded Corners Image
- Circle Image
- Thumbnail Image
- Aligning Image
- Centered Image