Bootstrap 5 Images

Bootstrap 5 images with responsive features have the efficiency to adjust themselves with respect to the parent container. Bootstrap 5 provides .img-fluid class that is used to create responsive image.

Bootstrap 5 Image Classes

There are following types of image classes in the Bootstrap 5.These are:

.rounded -It is used to make rounded shape images.
.rounded-circle - It is used to make circular image.
.img-thumbnail - It is used to make the thumbnail shape of the image.
.img-fluid - It is used to make images responsive and look good on all screen sizes.

Bootstrap 5 Image Styling

Bootstrap provides rounded, circle 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

      <img src="..." alt="Rounded Image" class="rounded">
<img src="..." alt="Rounded circle Image" class="rounded-circle">
<img src="..." alt="Thumbnail Image" class="img-thumbnail">

Try it now

Source Code

          <div class="container">
  <div class="row">
    <div class="col-12 col-sm-4 mb-2">
      <img src="https://picsum.photos/200/300" alt="Rounded Image" class="rounded img-fluid" />
    </div><!--/first column-->
    <div class="col-12 col-sm-4 mb-2">
      <img src="https://picsum.photos/seed/picsum/200/200" alt="Rounded circle Image" class="rounded-circle img-fluid" />
    </div><!--/second column-->
    <div class="col-12 col-sm-4 mb-2">
      <img src="https://picsum.photos/200/300?grayscale" alt="Thumbnail Image" class="img-thumbnail img-fluid" />
    </div><!--/third column-->
  </div> <!--/row-->
</div><!--/container-->

Try it now

Source Code : Output

Code Explanation

Note: To create rounded,rounded circle and thumbnail image,assign .rounded,.rounded-circle & img-thumbnail <img> element base class.

Bootstrap 5 Rounded Image

To achieve rounded corners in Bootstrap, use .rounded class to the <img> element base class.

General Syntax

      <img src="images/avatar.svg" class="rounded" alt="Circular Image">

Try it now

Source Code

          <div class="container text-center">
  <p class="text-center">Bootstrap Rounded Image</p>
  <p class="text-justify text-center">Creating rounded corner of the image.</p>
  <img src="https://picsum.photos/200/300" alt="Rounded Image" class="rounded img-fluid" />
</div>

Try it now

Source Code : Output

Bootstrap Rounded Image

Creating rounded corner of the image.

Code Explanation

Note:Assign .rounded to the <img> element base class to create rounded image shape.

Bootstrap 5 Image Circle

To make Bootstrap circular image, add .rounded-circle class to the <img> element. But keep in mind that the image width and height should be the same; otherwise, it will display an elliptical shape.

General Syntax

      <img src="..." class="rounded-circle" alt="Circular Image">

Try it now

Source Code

          <div class="container text-center mt-5">
  <p class="text-center">Bootstrap circular Image</p>
  <img src="https://picsum.photos/200/200" alt="Rounded Image" class="rounded-circle img-fluid" />
</div>
<!--/container-->

Try it now

Source Code : Output

Bootstrap circular Image

Code Explanation

Note: Assign .rounded-circle to the <img> element base class to create rounded circle image shape.

Bootstrap 5 Thumbnail Image Shape

To achieve thumbnail image shape for a image, you have to add .img-thumbnail to the <img> base class.

General Syntax

      <img src=".." alt="Thumbnail Image">

Try it now

Source Code

          <div class="container text-center">
  <h2 class="text-center">Bootstrap Image</h2>
  <p class="text-justify text-center">Creating thumbnail image shape.</p>
  <img src="https://picsum.photos/200/200" alt="Thumbnail Image" class="img-thumbnail img-fluid" />
</div>
<!--/container-->

Try it now

Source Code : Output

Bootstrap Image

Creating thumbnail image shape.

Code Explanation

Note:Assign .img-thumbnail to the <img> element base class to create thumbnail image shape. It adds 1px rounded border around the image.

Bootstrap 5 Responsive Images

A responsive image has the ability to resize, i.e., grow or shrink, itself within the parent container during container's size changes in all the screen sizes. Thus, it is clear that the size of the image should not overflow to its parent element. To create responsive image, you have to apply .img-fluid class to the <img> base class. It sets the image's max-width:100%; and height: auto; value.

General Syntax

      <img class="img-fluid" src=".." alt="Responsive images">

Try it now

Source Code

          <div class="container text-center">
  <h2 class="text-center">Bootstrap Responsive Image</h2>
  <img src="https://picsum.photos/200/200" alt="Thumbnail Image" class="img-thumbnail img-fluid" />
</div>

Try it now

Source Code : Output

Bootstrap Responsive Image

Code Explanation

Note:Assign .img-fluid to the <img> element base class to create responsive image.

Bootstrap 5 Images: Alignment

Aligning Images In Left And Right Part Of A Container

Bootstrap provides helper classes namely float classes and text alignment classes and margin utility class that plays a vital role to align any image.

To align any images in left part of a container, you have to apply .float-start to that base class of <img> while as to align right part of the container,you have to apply .float-end to that base <img> class.

General Syntax

      <img src="..." class="rounded float-start" alt="Image floated left" />
<img src=".." class="rounded float-end" alt="Image floated right" />

Try it now

Source Code

          <div class="container bg-light p-4 mt-4 overflow-hidden">
  <h2 class="text-center">Floating:Image</h2>
  <p class="text-justify text-center">Images can be floted either left or right inside the contaner.</p>
  <img src="https://picsum.photos/200/200" class="rounded float-start" alt="Image floated left" />
  <img src="https://picsum.photos/200/200" class="rounded float-end" alt="Image floated right" />
</div>
<!--/container-->

Try it now

Source Code : Output

Floating:Image

Images can be floted either left or right inside the contaner.

Code Explanation

Images can be floated either left or right inside the container by assigning .float-start & .float-end to the container.

Bootstrap Center Image

To align Bootstrap image in the center with respect to parent container, basically two techniques play vital role.

Place the image inside the external wrapper i.e. <div> and assign the .text-center class. Image will shift in the center.
Apply these classes .mx-auto, .d-block to the <img> base class. It will place the image to the center.

General Syntax

      <img src="..." class="rounded mx-auto d-block" alt="Center alignment">

Try it now

Source Code

          <div class="container mt-5">
  <h2 class="text-center">Image:Center Alignment</h2>
  <img src="https://picsum.photos/seed/picsum/200/300" class="rounded mx-auto d-block" alt="Center alignment Of Image" />
</div>
<!--/container-->

Try it now

Source Code : Output

Image:Center Alignment

Code Explanation

Note: Images can be aligned horizontally center by assigning .d-block & .mx-auto to the <img> element base class.

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4