Bootstrap 4 Images


Image Shapes

Bootstrap has many classes for sorting images and has a variety of functions.

Rounded:
tajmahal
Circle:
tajmahal
Thumbnail:
tajmahal

Image with rounded corners

The .rounded class is required to round out the bootstrap image corners.

Example

<img class="img-fluid rounded" src="./tajmahal.jpeg" alt="tajmahal">

Circle Image

The .rounded-circle class is required to circle the bootstrap image.

Example

<img class="img-fluid rounded-circle" src="./tajmahal.jpeg" alt="tajmahal">

Image Thumbnail

The .img-thumbnail class is required to thumbnail the bootstrap image.

Example

<img class="img-fluid img-thumbnail" src="./tajmahal.jpeg" alt="tajmahal">

Floating Images

If images are to be placed on the right or left side, then .float-right, .float-left classes must be added.

tajmahal
tajmahal

Example

<img src="./tajmahal.jpeg" class="float-left" height="200" width="300" alt="tajmahal">
<img src="./tajmahal.jpeg" class="float-right" height="200" width="300" alt="tajmahal">

Centered Images

If images are to be placed on the centered, then .mx-auto (margin:auto;), .d-block (display:block;)classes must be added.

tajmahal

Example

<img src="tajmahal.jpeg" class="mx-auto d-block img-fluid" width="200" alt="tajmahal">

Responsive Images

If you want a single image to be responsive on all screens. Then use the .img-fluid class. It has max-width:100%; and height:auto; For which all screen images can be displayed correctly. Resize your browser check the responsive image.

tajmahal

Example

<img src="tajmahal.jpeg" class="img-fluid" alt="tajmahal">