Images
Image Rounded & Circle
Use
rounded
class and
rounded-circle
class to show an image with
a round border and rounded shape respectively.


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


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.
Figures
Use the included figure
,
figure-img
and
figure-caption
classes to provide some baseline styles for the HTML5
<figure>
and
<figcaption>
elements.


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