images

In Bootstrap 5, handling images is simple and offers various utilities for styling, responsiveness, and alignment. Here's a guide to using images effectively:

Image Shapes:

Bootstrap provides utility classes to create rounded, circular, or thumbnail-style images:

Rounded Corners

Circle

Thumbnail

Class	Effect
.rounded	Adds rounded corners
.rounded-circle	Makes the image circular
.img-thumbnail	Adds padding and a border

Example

Try it yourself

Image Alignment:

Align images using utility classes.

Class	Alignment
.float-start	Left-aligned
.float-end	Right-aligned
.mx-auto d-block	Center-aligned

Example

Try it yourself

Responsive Images:

To make images responsive, add the class .img-fluid. This ensures the image scales with its parent container.

Example

Try it yourself

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.