Basic Example #
Create and group avatars of different sizes and shapes with the css classes. Using Bootstrap's naming convention, you can control size of avatar including standard avatar, or scale it up to different sizes.
.avatar-xs
.avatar-sm
.avatar-md
.avatar-lg
.avatar-xl
<img src="assets/images/users/avatar-2.jpg" alt="image" class="img-fluid avatar-xs rounded">
<img src="assets/images/users/avatar-3.jpg" alt="image" class="img-fluid avatar-sm rounded mt-2">
<img src="assets/images/users/avatar-4.jpg" alt="image" class="img-fluid avatar-md rounded" />
<img src="assets/images/users/avatar-5.jpg" alt="image" class="img-fluid avatar-lg rounded" />
<img src="assets/images/users/avatar-6.jpg" alt="image" class="img-fluid avatar-xl rounded" />
Rounded Circle#
Using an additional class .rounded-circle in <img> element creates the rounded avatar.
.avatar-md .rounded-circle
.avatar-lg .rounded-circle
.avatar-xl .rounded-circle
<img src="assets/images/users/avatar-7.jpg" alt="image" class="img-fluid avatar-md rounded-circle" />
<img src="assets/images/users/avatar-8.jpg" alt="image" class="img-fluid avatar-lg rounded-circle" />
<img src="assets/images/users/avatar-9.jpg" alt="image" class="img-fluid avatar-xl rounded-circle" />
Images Shapes#
Avatars with different sizes and shapes.
.rounded
.rounded
.rounded-circle
.img-thumbnail
.rounded-circle .img-thumbnail
<img src="assets/images/small/img-2.jpg" alt="image" class="img-fluid rounded" width="200" />
<img src="assets/images/users/avatar-5.jpg" alt="image" class="img-fluid rounded" width="120" />
<img src="assets/images/users/avatar-7.jpg" alt="image" class="img-fluid rounded-circle" width="120" />
<img src="assets/images/small/img-3.jpg" alt="image" class="img-fluid img-thumbnail" width="200" />
<img src="assets/images/users/avatar-8.jpg" alt="image" class="img-fluid rounded-circle img-thumbnail" width="120" />