Bootstrap 4 Images
Bootstrap 4 responsive images adjust itself with respect to parent container. There are different type of image shape that is created by different pre-defined classes.
Bootstrap 4 Image Styling
Bootstrap provides rounded, cirle 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
Bootstrap Image
Note: Bootstrap uses .rounded,.rounded-circle,.img-thumbnail to make rounded image, circular image and thumbnail image. This class is applied on the <img> element base class.
Note: Bootstrap provides followings types of image shape namely rounded, rounded-circle and thumbnail.
Rounded Corner Image Shape
To achieve rounded corners for a image, you have to add .rounded to the <img> element base class.
General Syntax
Try it nowSource Code
Source Code : Output
Rounded Image
Note:Simpally apply .rounded to the
Circle Image Shape
To achieve circle shape of a image,you have to add .rounded-circle to the <img> base class.
General Syntax
Try it nowSource Code
Source Code : Output
Circular Image
Note: In the above example .rounded-circle is applied to the <img> element base class.
Thumbnail Image Shape
To achieve thumbnail image shape ,you have to add .img-thumbnail to the <img> base class.
General Syntax
Try it nowSource Code
Source Code : Output
Bootstrap Thumbnail Image
Note:In the above example,assign .img-thumbnail to the <img> element base class.
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.
General Syntax
Try it nowSource Code
Source Code : Output
Responsive Images
Note: Please keep in minds that .img-fluid class provides max-width:100%; and height:auto; to the images.
Image Alignment
Image Left Alignment
Bootstrap provides helper classes namely float classes and text alignment classes and margin utility class that plays a vital role to align any image.
The followings are the steps for aligning the image in the left direction.
-
Std: Any image can be aligned in the left direction by assigning
.float-leftto the<img>element base class.
General Syntax
Try it nowSource Code
Source Code : Output
Bootstrap Image Left Alignment
Note:In the above example .float-left is applied to the <img> element base class.
Image: Right Alignment
The image can be aligned in the right direction of the container by just assigning .float-right to the
<img> element base class.Therefore image will be shifted in the right direction of the container.To clear float ,you have to assign .clearfix to the parent container of the <img> element.
General Syntax
Try it nowSource Code
Source Code : Output
Image Right Alignment
Note: In this example,.float-right is assigned to the <img> element base class.
Image:Center Alignment
Image can be aligned center with respect to the parent container. Basically, two techniques are used to aligned any image horizontally center.
Apply .mx-auto & .d-block to the <img> element base class.It will be placed the image horizontally center.
General Syntax
Try it nowSource Code
Source Code : Output
Center Image Alignment
Note: Since image is a inline element hence it will be converted into block level element by .d-bloack & then aligned horizontally center by .mx-auto . Please keep in mind that both class will be applied on <img> element base class.
Alternative Method To Align Bootstrap 4 Images In The Center
Bootstrap 4 images can be easily aligned in the center by assigning .text-center to the image container that contains the image. Then the image will be easily aligned horizontally center.
General Syntax
Try it nowSource Code
Source Code : Output
Other Method To Align Image Center
Note: In this method,you do not have to assign .mx-auto and .d-block to the image.You have to only put the image inside the container and assign .text-center to the container.