Default
Wrap your content with .avatar
class to create a avatar. You have to use inline attributes
to set height width of image in default avatar.
SD
Rio

Sizes
You can use class .avatar
with .avatar-{sm|lg|xl}
to modify size of your avatar.




Colors
Use class bg-{color-name}
to change background color of your avatar.
P
S
S
I
W
D
Icons
Avatar With Badge
You can add notification label to avatar by using .badge
with .badge-up
.
2
5
7
Status
Use class .avatar-status-{online | offline | away | busy}
to create avatar with status
SD
Rio
