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="src/img-min/img1-small.jpg" alt="Image Description">
              <img class="avatar-sm" src="src/img-min/img1-small.jpg" alt="Image Description">
              <img class="avatar-md" src="src/img-min/img1-small.jpg" alt="Image Description">
              <img class="avatar-lg" src="src/img-min/img1-small.jpg" alt="Image Description">

Bordered and rounded circle

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

Image Description Image Description Image Description Image Description 
            
              <img class="avatar-xs rounded-circle border border-light border-2" src="src/img-min/avatar/img1-small.jpg" alt="Image Description">
              <img class="avatar-sm rounded-circle border border-light border-3" src="src/img-min/avatar/img1-small.jpg" alt="Image Description">
              <img class="avatar-md rounded-circle border border-light border-4" src="src/img-min/avatar/img1-small.jpg" alt="Image Description">
              <img class="avatar-lg rounded-circle border border-light border-5" src="src/img-min/avatar/img1-small.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-light border-2 shadow" src="src/img-min/avatar/img1-small.jpg" alt="Image Description">
              <img class="avatar-sm border border-light border-3 shadow" src="src/img-min/avatar/img1-small.jpg" alt="Image Description">
              <img class="avatar-md border border-light border-4 shadow" src="src/img-min/avatar/img1-small.jpg" alt="Image Description">
              <img class="avatar-lg border border-light border-5 shadow" src="src/img-min/avatar/img1-small.jpg" alt="Image Description">

Avatar Group

Create avatar group with add .avatar-group classes.

Image Description Image Description Image Description 
            
              <div class="avatar-group">
                <a href="#">
                  <img class="avatar-md rounded-circle border border-light border-5" src="../../src/img-min/avatar/img1-small.jpg" alt="Image Description">
                </a>
                <a href="#">
                  <img class="avatar-md rounded-circle border border-light border-5" src="../../src/img-min/avatar/img2-small.jpg" alt="Image Description">
                </a>
                <a href="#">
                  <img class="avatar-md rounded-circle border border-light border-5" src="../../src/img-min/avatar/img3-small.jpg" alt="Image Description">
                </a>
              </div>