Bootstrap 5 images with responsive features have the efficiency to adjust themselves with respect to the parent container. Bootstrap 5 provides .img-fluid
class that is used to create responsive image.
Bootstrap provides rounded, circle and thumbnail shape for a single image. To achieve these shape you have to apply .rounded
, .rounded-circle
, .img-thumbnail
class to the <img>
base class.
General Syntax
<img src="..." alt="Rounded Image" class="rounded">
<img src="..." alt="Rounded circle Image" class="rounded-circle">
<img src="..." alt="Thumbnail Image" class="img-thumbnail">
Source Code
<div class="container">
<div class="row">
<div class="col-12 col-sm-4 mb-2">
<img src="https://picsum.photos/200/300" alt="Rounded Image" class="rounded img-fluid" />
</div><!--/first column-->
<div class="col-12 col-sm-4 mb-2">
<img src="https://picsum.photos/seed/picsum/200/200" alt="Rounded circle Image" class="rounded-circle img-fluid" />
</div><!--/second column-->
<div class="col-12 col-sm-4 mb-2">
<img src="https://picsum.photos/200/300?grayscale" alt="Thumbnail Image" class="img-thumbnail img-fluid" />
</div><!--/third column-->
</div> <!--/row-->
</div><!--/container-->
Source Code : Output
Code Explanation
Note:
To create rounded,rounded circle and thumbnail image,assign .rounded
,.rounded-circle
& img-thumbnail
<img>
element base class.
To achieve rounded corners for a image,you have to add
.rounded
to the <img>
base class.
Source Code
<div class="container text-center">
<h2 class="text-center">Bootstrap Rounded Image</h2>
<p class="text-justify text-center">Creating rounded corner of the image.</p>
<img src="https://picsum.photos/200/300" alt="Rounded Image" class="rounded img-fluid" />
</div>
Source Code : Output
Creating rounded corner of the image.
Code Explanation
Note:Assign .rounded
to the <img>
element base class to create rounded image shape.
To achieve circle shape for a image,you have to add .rounded-circle
to the <img>
base class.
Source Code
<div class="container text-center mt-5">
<h2 class="text-center">Bootstrap circular Image</h2>
<p class="text-justify text-center">Creating circular image shape.</p>
<img src="https://picsum.photos/200/200" alt="Rounded Image" class="rounded-circle img-fluid" />
</div>
<!--/container-->
Source Code : Output
Creating circular image shape.
Code Explanation
Note:
Assign .rounded-circle
to the <img>
element base class to create rounded circle image shape.
To achieve thumbnail image shape for a image,you have to add
.img-thumbnail
to the <img>
base class.
Source Code
<div class="container text-center">
<h2 class="text-center">Bootstrap Image</h2>
<p class="text-justify text-center">Creating thumbnail image shape.</p>
<img src="https://picsum.photos/200/200" alt="Thumbnail Image" class="img-thumbnail img-fluid" />
</div>
<!--/container-->
Source Code : Output
Creating thumbnail image shape.
Code Explanation
Note:Assign .img-thumbnail
to the <img>
element base class to create thumbnail image shape.
Responsive images adjusts itself with respect to parent container.To create responsive image,you have to apply
.img-fluid
class to the <img>
base class.
Please keep in minds that .img-fluid class provides max-width:100%;
and height:auto;
to the images.
Source Code
<div class="container text-center">
<h2 class="text-center">Bootstrap Responsive Image</h2>
<img src="https://picsum.photos/200/200" alt="Thumbnail Image" class="img-thumbnail img-fluid" />
</div>
Source Code : Output
Code Explanation
Note:Assign .img-fluid
to the <img>
element base class to create responsive image.
Bootstrap provides helper classes namely float classes and text alignment classes and margin utility class that plays a vital role to align any image.
To align any images in left part of a container,you have to apply
.float-start
to that base class of <img>
while as to align right part of the container,you have to apply .float-end
to that base <img>
class.
General Syntax
<img src="..." class="rounded float-start" alt="Image floated left" />
<img src=".." class="rounded float-end" alt="Image floated right" />
Source Code
<div class="container bg-light p-4 mt-4 overflow-hidden">
<h2 class="text-center">Floating:Image</h2>
<p class="text-justify text-center">Images can be floted either left or right inside the contaner.</p>
<img src="https://picsum.photos/200/200" class="rounded float-start" alt="Image floated left" />
<img src="https://picsum.photos/200/200" class="rounded float-end" alt="Image floated right" />
</div>
<!--/container-->
Source Code : Output
Images can be floted either left or right inside the contaner.
Code Explanation
Note:
Images can be floated either left or right inside the container by assigning .float-start
& .float-end
to the container.
To align any image center with respect to parent container,basically two techniques play vital role.
Apply these classes .rounded
,.mx-auto
, .d-block
to the <img>
base class.It will place the image to center.
Source Code
<div class="container mt-5">
<h2 class="text-center">Image:Center Alignment</h2>
<img src="https://picsum.photos/seed/picsum/200/300" class="rounded mx-auto d-block" alt="Center alignment Of Image" />
</div>
<!--/container-->
Source Code : Output
Code Explanation
Note:
Images can be aligned horizontally center by assigning .d-block
& .mx-auto
to the <img>
element base class.