Default avatar is square in shape. For rounded and circle avatar add .avatar-img .rounded
and .avatar-img .circle
modifier classes respectively.
Fancy larger or smaller avatar? Add .avatar-xl, .avatar-lg, .avatar-md, .avatar-sm
or .avatar-xs
for additional sizes. For custom sizes use sizing utilities - e.g. d-14 or d-20.
In need of an avatar, but not the image avatar? Replace the default modifier class with .avatar-text .avatar-text-*
ones to create avatar with name initials.
Class | Values |
---|---|
class="avatar-text avatar-text-[value]" | primary / success / warning / danger / info / light / dark / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke |
Replace the default modifier class with .avatar-text .avatar-text-inv-*
ones to create avatar with inverse colors.
Class | Values |
---|---|
class="avatar-text avatar-text-inv-[value]" | primary / success / warning / danger / info / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke |
Wrap a series of avatars with .avatar
in .avatar-group
. Use .avatar-group-lg
and .avatar-group-sm
for additional sizes.
For overlapped group of avatars replace default modifier class with .avatar-group-overlapped
.
Add icons instead of initials by using i tag inside avatar. Change the font sizes using font utilities.