Avatar

Examples for choosing different size of image classes for an Avatar (also known as a profile picture or userpic)


Avatar

avatar
avatar
avatar
avatar
<div class="avatar">
	<img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="avatar">
</div>
<div class="avatar">
	<img class="avatar-img rounded-circle" src="assets/images/avatar/02.jpg" alt="avatar">
</div>
<div class="avatar">
	<img class="avatar-img rounded-circle" src="assets/images/avatar/03.jpg" alt="avatar">
</div>
<div class="avatar">
	<img class="avatar-img rounded-circle" src="assets/images/avatar/09.jpg" alt="avatar">
</div>

Avatar group

  • avatar
  • avatar
  • avatar
  • avatar
<ul class="avatar-group">
	<li class="avatar">
		<img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="avatar">
	</li>
	<li class="avatar">
		<img class="avatar-img rounded-circle" src="assets/images/avatar/02.jpg" alt="avatar">
	</li>
	<li class="avatar">
		<img class="avatar-img rounded-circle" src="assets/images/avatar/03.jpg" alt="avatar">
	</li>
	<li class="avatar">
		<img class="avatar-img rounded-circle" src="assets/images/avatar/09.jpg" alt="avatar">
	</li>
	<li class="avatar">
		<div class="avatar-img rounded-circle bg-primary"><i class="fa-solid fa-plus text-white position-absolute top-50 start-50 translate-middle"></i></div>
	</li>
</ul>

Avatar group

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
<ul class="avatar-group avatar-group-two mt-4">
  <li class="avatar avatar-xs">
    <img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="avatar">
  </li>
  <li class="avatar avatar-xs">
    <img class="avatar-img rounded-circle" src="assets/images/avatar/02.jpg" alt="avatar">
  </li>
</ul>

<ul class="avatar-group avatar-group-three mt-4">
  <li class="avatar avatar-xs">
    <img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="avatar">
  </li>
  <li class="avatar avatar-xs">
    <img class="avatar-img rounded-circle" src="assets/images/avatar/02.jpg" alt="avatar">
  </li>
  <li class="avatar avatar-xs">
    <img class="avatar-img rounded-circle" src="assets/images/avatar/03.jpg" alt="avatar">
  </li>
</ul>

<ul class="avatar-group avatar-group-four mt-4">
  <li class="avatar avatar-xxs">
    <img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="avatar">
  </li>
  <li class="avatar avatar-xxs">
    <img class="avatar-img rounded-circle" src="assets/images/avatar/02.jpg" alt="avatar">
  </li>
  <li class="avatar avatar-xxs">
    <img class="avatar-img rounded-circle" src="assets/images/avatar/03.jpg" alt="avatar">
  </li>
  <li class="avatar avatar-xxs">
    <img class="avatar-img rounded-circle" src="assets/images/avatar/09.jpg" alt="avatar">
  </li>
</ul>

Avatar label

SL
MK
PT
MP
VP
DG
SL
MK
PT
MP
VP
W
<div class="avatar">
	<div class="avatar-img rounded-circle bg-primary"><span class="text-white position-absolute top-50 start-50 translate-middle fw-bold">SL</span></div>
</div>
<div class="avatar">
	<div class="avatar-img rounded-circle bg-danger"><span class="text-white position-absolute top-50 start-50 translate-middle fw-bold">MK</span></div>
</div>
<div class="avatar">
	<div class="avatar-img rounded-circle bg-warning"><span class="text-white position-absolute top-50 start-50 translate-middle fw-bold">PT</span></div>
</div>
<div class="avatar">
	<div class="avatar-img rounded-circle bg-success"><span class="text-white position-absolute top-50 start-50 translate-middle fw-bold">MP</span></div>
</div>
<div class="avatar">
	<div class="avatar-img rounded-circle bg-info"><span class="text-white position-absolute top-50 start-50 translate-middle fw-bold">VP</span></div>
</div>
<div class="avatar">
	<div class="avatar-img rounded-circle bg-dark"><span class="text-white position-absolute top-50 start-50 translate-middle fw-bold">DG</span></div>
</div>

<div class="avatar">
	<div class="avatar-img rounded-circle bg-primary bg-opacity-10"><span class="text-primary position-absolute top-50 start-50 translate-middle fw-bold">SL</span></div>
</div>
<div class="avatar">
	<div class="avatar-img rounded-circle bg-danger bg-opacity-10"><span class="text-danger position-absolute top-50 start-50 translate-middle fw-bold">MK</span></div>
</div>
<div class="avatar">
	<div class="avatar-img rounded-circle bg-warning bg-opacity-10"><span class="text-warning position-absolute top-50 start-50 translate-middle fw-bold">PT</span></div>
</div>
<div class="avatar">
	<div class="avatar-img rounded-circle bg-success bg-opacity-10"><span class="text-success position-absolute top-50 start-50 translate-middle fw-bold">MP</span></div>
</div>
<div class="avatar">
	<div class="avatar-img rounded-circle bg-info bg-opacity-10"><span class="text-info position-absolute top-50 start-50 translate-middle fw-bold">VP</span></div>
</div>
<div class="avatar">
	<div class="avatar-img rounded-circle bg-dark bg-opacity-10"><span class="text-dark position-absolute top-50 start-50 translate-middle fw-bold">W</span></div>
</div>

Avatar Styles

avatar
SL
avatar
MK
avatar
PT
avatar
VP
avatar
WB
<div class="avatar align-middle avatar-story">
  <a href="#!"> <img class="avatar-img rounded-circle" src="assets/images/avatar/09.jpg" alt=""> </a>
</div>
<div class="avatar align-middle">
	<img class="avatar-img" src="assets/images/avatar/01.jpg" alt="avatar">
</div>
<div class="avatar align-middle">
	<div class="avatar-img bg-primary"><span class="text-white position-absolute top-50 start-50 translate-middle fw-bold">SL</span></div>
</div>
<div class="avatar align-middle">
	<img class="avatar-img rounded" src="assets/images/avatar/02.jpg" alt="avatar">
</div>
<div class="avatar align-middle">
	<div class="avatar-img rounded bg-danger"><span class="text-white position-absolute top-50 start-50 translate-middle fw-bold">MK</span></div>
</div>
<div class="avatar align-middle">
	<img class="avatar-img rounded-3" src="assets/images/avatar/09.jpg" alt="avatar">
</div>
<div class="avatar align-middle">
	<div class="avatar-img rounded-3 bg-info"><span class="text-white position-absolute top-50 start-50 translate-middle fw-bold">PT</span></div>
</div>
<div class="avatar align-middle">
	<img class="avatar-img rounded-circle" src="assets/images/avatar/03.jpg" alt="avatar">
</div>
<div class="avatar align-middle">
	<div class="avatar-img rounded-circle bg-warning"><span class="text-white position-absolute top-50 start-50 translate-middle fw-bold">VP</span></div>
</div>
<div class="avatar align-middle">
	<img class="avatar-img rounded-circle border border-3 border-dark" src="assets/images/avatar/09.jpg" alt="avatar">
</div>
<div class="avatar align-middle">
	<div class="avatar-img rounded-circle border border-3 border-info bg-dark"><span class="text-white position-absolute top-50 start-50 translate-middle fw-bold">WB</span></div>
</div>

Avatar sizes

avatar
avatar
avatar
avatar
avatar
avatar
avatar
avatar
<div class="avatar avatar-xxs">
  <img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="avatar">
</div>
<div class="avatar avatar-xs">
  <img class="avatar-img rounded-circle" src="assets/images/avatar/02.jpg" alt="avatar">
</div>
<div class="avatar avatar-sm">
  <img class="avatar-img rounded-circle" src="assets/images/avatar/03.jpg" alt="avatar">
</div>
<div class="avatar">
  <img class="avatar-img rounded-circle" src="assets/images/avatar/09.jpg" alt="avatar">
</div>
<div class="avatar avatar-lg">
  <img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="avatar">
</div>
<div class="avatar avatar-xl">
  <img class="avatar-img rounded-circle" src="assets/images/avatar/02.jpg" alt="avatar">
</div>
<div class="avatar avatar-xxl">
  <img class="avatar-img rounded-circle" src="assets/images/avatar/03.jpg" alt="avatar">
</div>
<div class="avatar avatar-xxxl">
  <img class="avatar-img rounded-circle" src="assets/images/avatar/09.jpg" alt="avatar">
</div>

Avatar status

<!-- Avatar status online -->
<div class="avatar status-online">
  <img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="">
</div>
<!-- Avatar status offline -->
<div class="avatar status-offline">
  <img class="avatar-img rounded-circle" src="assets/images/avatar/02.jpg" alt="">
</div>
<!-- Avatar status away -->
<div class="avatar status-away">
  <img class="avatar-img rounded-circle" src="assets/images/avatar/03.jpg" alt="">
</div>