Home Get StartedTokensDocsComponents

Avatar Group

new

Avatar group component displays a number of avatars grouped together in a stack.

Contents

Bootstrap 5 Avatar group component

Responsive Avatar group built with the latest Bootstrap 5. Avatar group component displays a number of avatars grouped together in a stack.

Stacked avatar

Include multiple avatars in stacked.

+6 
<div class="avatar-stack">
    <span class="avatar">+6</span>
    <img class="avatar" src="/images/avatar/1.jpg" />
    <img class="avatar" src="/images/avatar/2.jpg" />
    <img class="avatar" src="/images/avatar/4.jpg" />
    <img class="avatar" src="/images/avatar/5.jpg" />
</div>

Border color

The color of the border around the avatar. Any color that the CSS border-color property accepts can be used.

+6 
<div class="avatar-stack avatar-stack-reverse">
    <span class="avatar border-danger">+6</span>
    <img class="avatar border-danger" src="/images/avatar/1.jpg" />
    <img class="avatar border-danger" src="/images/avatar/2.jpg" />
    <img class="avatar border-danger" src="/images/avatar/4.jpg" />
    <img class="avatar border-danger" src="/images/avatar/5.jpg" />
</div>

Grouped avatar

+6
<div class="avatar-group">
    <img class="avatar" src="/images/avatar/1.jpg" />
    <img class="avatar" src="/images/avatar/2.jpg" />
    <img class="avatar" src="/images/avatar/4.jpg" />
    <img class="avatar" src="/images/avatar/5.jpg" />
    <span class="avatar">+6</span>
</div>
Edit this page on Github
Last edited by zhengchun on November 30, 2023