Bootstrap Images

Bootstrap images provides the different shapes of an image. Let us see bootstrap's 5 different image shapes, and basic classes.

Bootstrap 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

General Syntax

      <img src="https://picsum.photos/seed/picsum/200/300" alt="Rounded Image" class="rounded" />
<img src="https://picsum.photos/seed/picsum/200/300" alt="Rounded circle Image" class="rounded-circle" />
<img src="https://picsum.photos/seed/picsum/200/300" alt="Thumbnail Image" class="img-thumbnail" />

Try It Now

Source Code

    <div class="container">
  <div class="row">
    <div class="col-md-4 text-center mb-4">
      <img src="https://picsum.photos/seed/picsum/200/200" alt="Rounded Image" class="rounded" />
    </div>
    <div class="col-md-4 text-center mb-4">
      <img src="https://picsum.photos/seed/picsum/200/200" alt="Rounded circle Image" class="rounded-circle" />
    </div>
    <div class="col-md-4 text-center mb-4">
      <img src="https://picsum.photos/seed/picsum/200/200" alt="Thumbnail Image" class="img-thumbnail" />
    </div>
  </div>
  <!--/row-->
</div>
<!--/row-->

Try it yourself

Source Code : Output

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

      <div class="container text-center">
  <img src="https://picsum.photos/seed/picsum/200/200" class="rounded" alt="Circular Image" />
</div>
<!--/container-->

Try It Now

Source Code

    <div class="container text-center">
  <img src="https://picsum.photos/seed/picsum/200/200" class="rounded" alt="Circular Image" />
</div>
<!--/container-->

Try it yourself

Source Code : Output

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="https://picsum.photos/seed/picsum/200/200" class="rounded-circle" alt="Circular Image">

Try It Now

Source Code

    <div class="container text-center my-3">
  <img src="https://picsum.photos/seed/picsum/200/200" class="rounded-circle" alt="Circular Image" />
</div>
<!--/container-->

Try it yourself

Source Code : Output

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="https://picsum.photos/seed/picsum/200/200" class="img-thumbnail" alt="Thumbnail Image">

Try It Now

Source Code

    <div class="container text-center my-3">
  <img src="https://picsum.photos/seed/picsum/200/200" class="img-thumbnail" alt="Thumbnail Image" />
</div>
<!--/container-->

Try it yourself

Source Code : Output

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="https://picsum.photos/200/200" alt="Responsive images">

Try It Now

Source Code

    <div class="container text-center my-3">
  <img class="img-fluid" src="https://picsum.photos/200/200" alt="Responsive images" />
</div>
<!--/container-->

Try it yourself

Source Code : Output

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

How To Align Images

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="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" />

Try It Now

Source Code

    <div class="container text-center my-3">
  <div class="row">
    <div class="col-sm-6">
      <img src="https://picsum.photos/200/200" class="rounded float-start" alt="Image floated left" />
    </div>
    <div class="col-sm-6 mt-5">
      <img src="https://picsum.photos/200/200" class="rounded float-end" alt="Image floated right" />
    </div>
  </div>
  <!--/row-->
</div>
<!--/container-->

Try it yourself

Source Code : Output

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

There are mainly two ways to align the image in the center horizontally with respect to parent container.

Place the image into an external wrapper, i.e., a div, and add .text-center class to the div then image will be shifted to the center.
Add .rounded,.mx-auto and .d-block classes to the <img> element base class. Then, the image will be shifted to the center horizontally.

General Syntax

      <img src="https://picsum.photos/seed/picsum/200/200" class="rounded mx-auto d-block" alt="Center alignment">

Try It Now

Source Code

    <div class="container text-center my-3">
  <img src="https://picsum.photos/seed/picsum/200/200" class="rounded mx-auto d-block" alt="Center alignment" />
</div>
<!--/container-->

Try it yourself

Source Code : Output

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

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS