Images
Image Rounded & Circle
Use
rounded class and rounded-circle class to show an image with a round border and rounded shape respectively.
<!-- Rounded Image -->
<img class="rounded" alt="200x200" width="200" src="/static/images/small/img-4.jpg">
<!-- Rounded-circle Image -->
<img class="rounded-circle avatar-xl" alt="200x200" src="/static/images/users/avatar-4.jpg">
Image Thumbnails
Use img-thumbnail class to give an image
rounded 1px border appearance.
<!-- Thumbnails Images -->
<img class="img-thumbnail" alt="200x200" width="200" src="/static/images/small/img-3.jpg">
<img class="img-thumbnail rounded-circle avatar-xl" alt="200x200" src="/static/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
<!-- Image Sizes --> <img src="/static/images/users/avatar-2.jpg" alt="" class="rounded avatar-xxs"><img src="/static/images/users/avatar-10.jpg" alt="" class="rounded avatar-xs"><img src="/static/images/users/avatar-3.jpg" alt="" class="rounded avatar-sm"><img src="/static/images/users/avatar-4.jpg" alt="" class="rounded avatar-md"><img src="/static/images/users/avatar-5.jpg" alt="" class="rounded avatar-lg"><img src="/static/images/users/avatar-8.jpg" alt="" class="rounded avatar-xl"><img src="/static/images/users/avatar-2.jpg" alt="" class="rounded-circle avatar-xxs"><img src="/static/images/users/avatar-10.jpg" alt="" class="rounded-circle avatar-xs"><img src="/static/images/users/avatar-3.jpg" alt="" class="rounded-circle avatar-sm"><img src="/static/images/users/avatar-4.jpg" alt="" class="rounded-circle avatar-md"><img src="/static/images/users/avatar-5.jpg" alt="" class="rounded-circle avatar-lg"><img src="/static/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.
XXS
XS
SM
MD
LG
XL
<!-- 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
<!-- Simple Group -->
<div class="avatar-group">
<div class="avatar-group-item">
<img src="/static/images/users/avatar-4.jpg" alt="" class="rounded-circle avatar-sm">
</div>
<div class="avatar-group-item">
<img src="/static/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="/static/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="/static/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="/static/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.
<!-- figures Images -->
<figure class="figure">
<img src="/static/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="/static/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.
<!-- Responsive Images -->
<img src="/static/images/small/img-2.jpg" class="img-fluid" alt="Responsive image">