Image Rounded & Circle

Use rounded class and rounded-circle class to show an image with a round border and rounded shape respectively.

200x200
200x200

Image Thumbnails

Use img-thumbnail class to give an image rounded 1px border appearance.

200x200
200x200

Image Sizes

Use avatar-xxs, avatar-xs, avatar-sm, avatar-md, avatar-lg, avatar-xl class for different image sizes.

avatar-xxs

avatar-xs

avatar-sm

avatar-md

avatar-lg

avatar-xl

avatar-xxs

avatar-xs

avatar-sm

avatar-md

avatar-lg

avatar-xl

Avatar With Content

Use avatar-xxs, avatar-xs,avatar-sm,avatar-md,avatar-lg,avatar-xl class to set different avatar content.

XXS
XS
SM
MD
LG
XL

Avatar Group

Use avatar-group class to show avatar images with the group.

A

Use avatar-group class with data-bs-toggle="tooltip" to show avatar group images with tooltip.

Figures

Use the included figure, figure-img and figure-caption classes to provide some baseline styles for the HTML5 <figure> and <figcaption> elements.

...
A caption for the above image.
...
A caption for the above image.

Responsive Images

Responsive Images with img-fluid,max-width: 100%; and height: auto; to the image so that it scales with the parent width.

Responsive image
© Dosix.
Design & Develop by Themesbrand