Bootstrap 4 images

Bootstrap 4 Images

Bootstrap 4 images having responsive feature, 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

Rounded Image
Circular Image
Thumbnail Image

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Bootstrap Image

Rounded Image
Circular Image
Thumbnail 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.

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 now

Source Code

Try it now

Source Code : Output

Rounded Image

Rounded Image

Note:Simpally apply .rounded to the element base class to make rounded image.

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 now

Source Code

Try it now

Source Code : Output

Circular Image

Rounded 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 now

Source Code

Try it now

Source Code : Output

Bootstrap Thumbnail Image

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 now

Source Code

Try it now

Source Code : Output

Responsive Images

Rounded Image

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-left to the <img> element base class.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Bootstrap Image Left Alignment

Thumbnail Image

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 now

Source Code

Try it now

Source Code : Output

Image Right Alignment

Thumbnail Image

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 now

Source Code

Try it now

Source Code : Output

Center Image Alignment

external image

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 now

Source Code

Try it now

Source Code : Output

Other Method To Align Image Center

Thumbnail Image

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.

Online Test / Quiz