Bootstrap 5 Images
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 Image Styling
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.
Example
General Syntax
Try it nowSource Code
Source Code : Output
Code Explanation
Note:
To create rounded,rounded circle and thumbnail image,assign .rounded,.rounded-circle & img-thumbnail <img> element base class.
Rounded Corner Image Shape
To achieve rounded corners for a image,you have to add
.rounded to the <img> base class.
General Syntax
Try it nowSource Code
Source Code : Output
Bootstrap Rounded Image
Creating rounded corner of the image.
Code Explanation
Note:Assign .rounded to the <img> element base class to create rounded image shape.
Circle Image Shape
To achieve circle shape for a image,you have to add .rounded-circle to the <img> base class.
General Syntax
Try it nowSource Code
Source Code : Output
Bootstrap circular Image
Creating circular image shape.
Code Explanation
Note:
Assign .rounded-circle to the <img> element base class to create rounded circle image shape.
Thumbnail Image Shape
To achieve thumbnail image shape for a image,you have to add
.img-thumbnail to the <img> base class.
General Syntax
Try it nowSource Code
Source Code : Output
Bootstrap Image
Creating thumbnail image shape.
Code Explanation
Note:Assign .img-thumbnail to the <img> element base class to create thumbnail image shape.
Responsive Images
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.
General Syntax
Try it nowSource Code
Source Code : Output
Bootstrap Responsive Image
Code Explanation
Note:Assign .img-fluid to the <img> element base class to create responsive image.
Bootstrap 5 Images: Alignment
Aligning Images In Left And Right Part Of A Container
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
Try it nowSource Code
Source Code : Output
Floating:Image
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.
Center Alignment Of A Image
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.
General Syntax
Try it nowSource Code
Source Code : Output
Image:Center Alignment
Code Explanation
Note:
Images can be aligned horizontally center by assigning .d-block & .mx-auto to the <img> element base class.