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


HTML Preview
<!-- Rounded Image --> <img class="rounded" alt="200x200" width="200" src="assets/images/small/img-4.jpg">
<!-- Rounded-circle Image --> <img class="rounded-circle avatar-xl" alt="200x200" src="assets/images/users/avatar-4.jpg">
Image Thumbnails
Use img-thumbnail
class to give an image rounded 1px border appearance.


HTML Preview
<!-- Thumbnails Images --> <img class="img-thumbnail" alt="200x200" width="200" src="assets/images/small/img-3.jpg">
<img class="img-thumbnail rounded-circle avatar-xl" alt="200x200" src="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.

avatar-xxs

avatar-xs

avatar-sm

avatar-md

avatar-lg

avatar-xl

avatar-xxs

avatar-xs

avatar-sm

avatar-md

avatar-lg

avatar-xl
HTML Preview
<!-- Image Sizes --> <img src="assets/images/users/avatar-2.jpg" alt="" class="rounded avatar-xxs">
<img src="assets/images/users/avatar-10.jpg" alt="" class="rounded avatar-xs">
<img src="assets/images/users/avatar-3.jpg" alt="" class="rounded avatar-sm">
<img src="assets/images/users/avatar-4.jpg" alt="" class="rounded avatar-md">
<img src="assets/images/users/avatar-5.jpg" alt="" class="rounded avatar-lg">
<img src="assets/images/users/avatar-8.jpg" alt="" class="rounded avatar-xl">
<img src="assets/images/users/avatar-2.jpg" alt="" class="rounded-circle avatar-xxs">
<img src="assets/images/users/avatar-10.jpg" alt="" class="rounded-circle avatar-xs">
<img src="assets/images/users/avatar-3.jpg" alt="" class="rounded-circle avatar-sm">
<img src="assets/images/users/avatar-4.jpg" alt="" class="rounded-circle avatar-md">
<img src="assets/images/users/avatar-5.jpg" alt="" class="rounded-circle avatar-lg">
<img src="assets/images/users/avatar-8.jpg" alt="" class="rounded-circle avatar-xl">
Avatar With Content
Use avatar-xxs, avatar-xs,avatar-sm,avatar-md,avatar-lg,avatar-xl
class to set different avatar content.
HTML Preview
<!-- Avatar With Content --> <div class="avatar-xxs"> <div class="avatar-title rounded bg-primary-subtle text-primary"> XXS </div> </div>
<div class="avatar-xs"> <div class="avatar-title rounded bg-secondary-subtle text-secondary"> XS </div> </div>
<div class="avatar-sm"> <div class="avatar-title rounded bg-success-subtle text-success"> Sm </div> </div>
<div class="avatar-md"> <div class="avatar-title rounded bg-info-subtle text-info"> Md </div> </div>
<div class="avatar-lg"> <div class="avatar-title rounded bg-warning-subtle text-warning"> Lg </div> </div>
<div class="avatar-xl"> <div class="avatar-title rounded bg-danger-subtle text-danger"> Xl </div> </div>
Avatar Group
HTML Preview
<!-- Simple Group --> <div class="avatar-group"> <div class="avatar-group-item"> <img src="assets/images/users/avatar-4.jpg" alt="" class="rounded-circle avatar-sm"> </div> <div class="avatar-group-item"> <img src="assets/images/users/avatar-5.jpg" alt="" class="rounded-circle avatar-sm"> </div> <div class="avatar-group-item"> <div class="avatar-sm"> <div class="avatar-title rounded-circle bg-light text-primary"> A </div> </div> </div> <div class="avatar-group-item"> <img src="assets/images/users/avatar-2.jpg" alt="" class="rounded-circle avatar-sm"> </div> </div>
<!-- Avatar Group with Tooltip --> <div class="avatar-group"> <a href="javascript: void(0);" class="avatar-group-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Christi"> <img src="assets/images/users/avatar-4.jpg" alt="" class="rounded-circle avatar-sm"> </a> <a href="javascript: void(0);" class="avatar-group-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Frank Hook"> <img src="assets/images/users/avatar-3.jpg" alt="" class="rounded-circle avatar-sm"> </a> <a href="javascript: void(0);" class="avatar-group-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Christi"> <div class="avatar-sm"> <div class="avatar-title rounded-circle bg-light text-primary"> C </div> </div> </a> <a href="javascript: void(0);" class="avatar-group-item" data-bs-toggle="tooltip" data-bs-placement="top" title="more"> <div class="avatar-sm"> <div class="avatar-title rounded-circle"> 2+ </div> </div> </a> </div>
Figures
Use the included figure
, figure-img
and figure-caption
classes to provide some baseline styles for the HTML5 <figure>
and <figcaption>
elements.


HTML Preview
<!-- figures Images --> <figure class="figure"> <img src="assets/images/small/img-4.jpg" class="figure-img img-fluid rounded" alt="..."> <figcaption class="figure-caption">A caption for the above image.</figcaption> </figure>
<figure class="figure mb-0"> <img src="assets/images/small/img-5.jpg" class="figure-img img-fluid rounded" alt="..."> <figcaption class="figure-caption text-end">A caption for the above image.</figcaption> </figure>
Responsive Images
Responsive Images with img-fluid,max-width: 100%; and height: auto;
to the image so that it scales with the parent width.

HTML Preview
<!-- Responsive Images -->
<img src="assets/images/small/img-2.jpg" class="img-fluid" alt="Responsive image">