Avatars
Various avatars using image or initials combined with a background color.
Avatar Image
<!-- Default -->
<div class="avatar avatar-xs" style="background-image:url(../demo.files/images/avatar/jessica_barden.jpg)"></div>
<div class="avatar avatar-sm" style="background-image:url(../demo.files/images/avatar/jessica_barden.jpg)"></div>
<div class="avatar avatar-md" style="background-image:url(../demo.files/images/avatar/jessica_barden.jpg)"></div>
<div class="avatar avatar-lg" style="background-image:url(../demo.files/images/avatar/jessica_barden.jpg)"></div>
<div class="avatar avatar-xl" style="background-image:url(../demo.files/images/avatar/jessica_barden.jpg)"></div>
<!-- Circle -->
<div class="avatar avatar-xs rounded-circle" style="background-image:url(../demo.files/images/avatar/jessica_barden.jpg)"></div>
<div class="avatar avatar-sm rounded-circle" style="background-image:url(../demo.files/images/avatar/jessica_barden.jpg)"></div>
<div class="avatar avatar-md rounded-circle" style="background-image:url(../demo.files/images/avatar/jessica_barden.jpg)"></div>
<div class="avatar avatar-lg rounded-circle" style="background-image:url(../demo.files/images/avatar/jessica_barden.jpg)"></div>
<div class="avatar avatar-xl rounded-circle" style="background-image:url(../demo.files/images/avatar/jessica_barden.jpg)"></div>
Avatar Group
2+
2+
2+
2+
3+
<!--
.avatar-xs
.avatar-sm
.avatar-md
.avatar-lg
.avatar-xl
-->
<div class="avatar-group">
<div class="avatar avatar-sm avatar-border rounded-circle" style="background-image:url(../demo.files/images/avatar/jessica_barden.jpg)"></div>
<div class="avatar avatar-sm avatar-border rounded-circle" style="background-image:url(../demo.files/images/avatar/jadson_dantas.jpg)"></div>
<div class="avatar avatar-sm avatar-border rounded-circle" style="background-image:url(../demo.files/images/avatar/tasmin_egerton.jpg)"></div>
<div class="avatar avatar-sm avatar-border rounded-circle bg-primary text-white">
<i>2+</i>
</div>
</div>
Avatar Color
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
JD
<!--
Background Color
.bg-*
.bg-*-soft
Borderd
.border.border-*
* = primary|secondary|success|danger|warning|info|light|dark
-->
<!-- squared : solid -->
<div class="avatar bg-primary text-white"><i>JD</i></div>
<!-- squared : soft -->
<div class="avatar bg-primary-soft text-primary"><i>JD</i></div>
<!-- squared : bordered -->
<div class="avatar border border-primary text-white"><i>JD</i></div>
<!-- circle : solid -->
<div class="avatar bg-primary rounded-circle text-white"><i>JD</i></div>
<!-- circle : soft -->
<div class="avatar bg-primary-soft rounded-circle text-primary"><i>JD</i></div>
<!-- circle : bordered -->
<div class="avatar border border-primary rounded-circle text-primary"><i>JD</i></div>
Avatar Size
XS
SM
MD
LG
XL
XS
SM
MD
LG
XL
<!--
.avatar-xs
.avatar-sm
.avatar-md
.avatar-lg
.avatar-xl
-->
<div class="avatar avatar-md bg-primary text-white"><i>MD</i></div>
<div class="avatar avatar-md rounded-circle bg-primary text-white"><i>MD</i></div>
Avatar Status
MD
MD
MD
MD
MD
MD
MD
MD
<!-- top-left -->
<div class="avatar avatar-md" style="background-image:url(../demo.files/images/avatar/jessica_barden.jpg)">
<i class="avatar-status top-0 start-0 bg-primary"></i>
</div>
<!-- top-right -->
<div class="avatar avatar-md" style="background-image:url(../demo.files/images/avatar/jessica_barden.jpg)">
<i class="avatar-status top-0 end-0 bg-primary"></i>
</div>
<!-- bottom-left -->
<div class="avatar avatar-md" style="background-image:url(../demo.files/images/avatar/jessica_barden.jpg)">
<i class="avatar-status bottom-0 start-0 bg-primary"></i>
</div>
<!-- bottom-left -->
<div class="avatar avatar-md" style="background-image:url(../demo.files/images/avatar/jessica_barden.jpg)">
<i class="avatar-status bottom-0 end-0 bg-primary"></i>
</div>
<!-- background color + initials -->
<div class="avatar rounded-circle avatar-md bg-primary text-white">
<i>MD</i>
<i class="avatar-status top-0 start-0 bg-primary"></i>
</div>