Bootstrap Images

In bootstrap, we can change the default appearance of images by applying the different classes like rounder corners, circle or thumbnail based on our requirements.

 

Following are the three different classes which are useful to change the appearance of images in bootstrap.

 

  • .rounded
  • .rounded-circle
  • .img-thumbnail

The above bootstrap classes will change the default appearance of images like as shown below.

 

Bootstrap image styles with different classes

 

Now, we will learn how to use each class (rounded, rounded-circle and img-thumbnail) in-detail to style your images with examples in bootstrap.

Bootstrap Image Thumbnails

In bootstrap, the .img-thumbnail class will shape the image to thumbnail by adding rounded 1px border.

 

Live Preview

<img src="fox.png" class="img-thumbnail" />

The above example will return the result like as shown below.

 

Bootstrap image thumbnail example result

 

If you observe the above result, the bootstrap .img-thumbnail class has shaped the image to thumbnail by adding rounded 1px border.

Bootstrap Rounded Corners Images

In bootstrap, the .rounded class will add rounded corners to the image.

 

Live Preview

<img src="fox.png" class="rounded" />

The above example will return the result like as shown below.

 

Bootstrap rounded corners image example result

 

If you observe the above result, the bootstrap .rounded class has added the rounded corners to the image.

Bootstrap Circle Images

In bootstrap, the .rounded-circle class will shape the image to circle.

 

Live Preview

<img src="fox.png" class="rounded-circle" />

The above example will return the result like as shown below.

 

Bootstrap rounded image example result

 

If you observe the above result, the bootstrap .rounded-circle class has shaped the image to circle.

Bootstrap Responsive Images

In bootstrap, by adding .img-fluid class to the <img> tag we can create a responsive images. The .img-fluid class will apply max-width: 100% and height: auto to the image so that it will scales with the parent element.

 

For example, if image size is greater than the containing element, then the responsive class (.img-fluid) will adjust the image size based on the containing element.

 

Live Preview

<img src="fox.png" class="img-fluid" />

 This is how we can create the responsive images by using .img-fluid class in bootstrap.

Bootstrap Align Images

In bootstrap, we can align the images either by using float helper classes (.float-left, .float-right) or text alignment classes (.text-right, .text-left, or .text-center) like as shown below.

 

Live Preview

<img src="fox.png" class="float-left"/>

<img src="fox.png" class="float-right" />

The above example will return the result like as shown below.

 

Bootstrap images alignment example result

 

If you observe the above result, we aligned images left and right by using bootstrap .float-left and .float-right classes.

Bootstrap Centered Image

In bootstrap, we can horizontally center the image by adding .mx-auto (margin: auto) and d-block (display: block) classes to the images like as shown below.

 

Live Preview

<img src="fox.png" class="mx-auto d-block" />

The above example will return the result like as shown below.

 

Bootstrap centered image example result

 

This is how we can align the images by using bootstrap float or text or margin helper classes based on our requirements.

 
 
 

Topics Covered