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

Rounded image
Rounded cirle image
Thumbnail image

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

Rounded Image
Rounded circle Image
Thumbnail Image

Code Explanation

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

Rounded Corner Image Shape

To achieve rounded corners for a image,you have to add .rounded to the <img> base class.

General Syntax

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

Source Code

          <div class="container text-center">
  <h2 class="text-center">Bootstrap Rounded Image</h2>
  <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.

Rounded Image

Code Explanation

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

Circle Image Shape

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

General Syntax

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

Source Code

          <div class="container text-center mt-5">
  <h2 class="text-center">Bootstrap circular Image</h2>
  <p class="text-justify text-center">Creating circular image shape.</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

Creating circular image shape.

Rounded Image

Code Explanation

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

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.

Thumbnail Image

Code Explanation

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

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.

Please keep in minds that .img-fluid class provides max-width:100%; and height:auto; to the images.

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

Thumbnail 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.

Image floated left Image floated right

Code Explanation

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

Center Alignment Of A Image

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

Apply these classes .rounded,.mx-auto, .d-block to the <img> base class.It will place the image to 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

Center alignment Of Image

Code Explanation

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

Online Test / Quiz

Web Tutorials

Bootstrap 5 Responsive Images
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4