Skip to main content

Avatars

Examples avatar classes for opting different size of image.

Example

Avatar classes are applied to the image so that it scales with the parent element.

Image Description Image Description Image Description Image Description 
            
              <img class="avatar-xs" src="../../assets/img/avatar1.png" alt="Image Description">
              <img class="avatar-sm" src="../../assets/img/avatar1.png" alt="Image Description">
              <img class="avatar-md" src="../../assets/img/avatar1.png" alt="Image Description">
              <img class="avatar-lg" src="../../assets/img/avatar1.png" alt="Image Description">

Bordered and rounded

Use bordered classes to wrap .avatar- elements with rounded.

Image Description Image Description Image Description Image Description 
            
              <img class="avatar-xs avatar-rounded border border-2" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
              <img class="avatar-sm avatar-rounded border border-3" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
              <img class="avatar-md avatar-rounded border border-4" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
              <img class="avatar-lg avatar-rounded border border-5" src="../../assets/img/100x100/img1.jpg" alt="Image Description">

Bordered and Shadow

Use bordered classes to wrap .avatar- elements with shadow.

Image Description Image Description Image Description Image Description 
            
              <img class="avatar-xs border border-2 shadow" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
              <img class="avatar-sm border border-3 shadow" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
              <img class="avatar-md border border-4 shadow" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
              <img class="avatar-lg border border-5 shadow" src="../../assets/img/100x100/img1.jpg" alt="Image Description">