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 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.
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.
To achieve rounded corners for a image, you have to add .rounded
to the <img>
element base class.
Note:Simpally apply .rounded
to the
element base class to make rounded image.
To achieve circle shape of a image,you have to add .rounded-circle
to the <img>
base class.
Note: In the above example .rounded-circle
is applied to the <img>
element base class.
To achieve thumbnail image shape ,you have to add .img-thumbnail
to the <img>
base class.
Note:In the above example,assign .img-thumbnail
to the <img>
element base class.
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.
Note: Please keep in minds that .img-fluid class provides max-width:100%;
and height:auto;
to the images.
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.
.float-left
to the <img>
element base class.
Note:In the above example .float-left
is applied to the <img>
element base class.
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.
Note: In this example,.float-right
is assigned to the <img>
element base class.
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.
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.
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.
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.