Images
Image Rounded & Circle
Use
rounded
class and rounded-circle
class to show an image with a round border and rounded shape respectively.
![200x200](assets/images/small/img-4.jpg)
![200x200](assets/images/users/avatar-4.jpg)
Image Thumbnails
Use img-thumbnail
class to give an image rounded 1px border appearance.
![200x200](assets/images/small/img-3.jpg)
![200x200](assets/images/users/avatar-3.jpg)
Image Sizes
Use avatar-xxs
, avatar-xs
, avatar-sm
, avatar-md
, avatar-lg
, avatar-xl
class for different image sizes.
![](assets/images/users/avatar-2.jpg)
avatar-xxs
![](assets/images/users/avatar-10.jpg)
avatar-xs
![](assets/images/users/avatar-3.jpg)
avatar-sm
![](assets/images/users/avatar-4.jpg)
avatar-md
![](assets/images/users/avatar-5.jpg)
avatar-lg
![](assets/images/users/avatar-8.jpg)
avatar-xl
![](assets/images/users/avatar-2.jpg)
avatar-xxs
![](assets/images/users/avatar-10.jpg)
avatar-xs
![](assets/images/users/avatar-3.jpg)
avatar-sm
![](assets/images/users/avatar-4.jpg)
avatar-md
![](assets/images/users/avatar-5.jpg)
avatar-lg
![](assets/images/users/avatar-8.jpg)
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.
![...](assets/images/small/img-4.jpg)
![...](assets/images/small/img-5.jpg)
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](assets/images/small/img-2.jpg)