Bootstrap 4 Images

Bootstrap provides several classes for images to make them responsive and also helps to give some style to the images.

Image Shapes

Rounded Corners

Bootstrap 4 offers .rounded class that makes the corners of the image rounded.

Example

Output

Bootstrap 4 Images

Circle

The .rounded-circle class is used to make the shape of the image circle.

Example

Output

Bootstrap 4 Images

Thumbnail

Bootstrap 4 offers a .img-thumbnail class that helps to make the 1px rounded-corner border around the image.

Example

Output

Bootstrap 4 Images

Aligning Image

Bootstrap 4 provides a “float” feature that helps to move the image left or right. The .float-right class float the image to the right, and .float-left class float the image to the left.

Example

Output

Bootstrap 4 Images

Centered Image

You can align your image to the center with the help of .mx-auto  (margin: auto) class and .d-block (display: block) class. To create the centered aligned image, add the .mx-auto class along with the .d-block class to the <img> element.

Example

Output

Bootstrap 4 Images

Responsive Images

 A responsive image is one that does not allow itself to become bigger than its parent element when you resize the browser. Responsive images adjust itself automatically according to their parent element. To provide the responsive behavior to the image, add the .img-fluid class to the <img> element.

Example

Output

Bootstrap 4 Images