Avatars

Client only

Create and group avatars of different sizes and shapes with a single component.


Sizing

Using Bootstrap’s typical naming structure, you can create a standard avatar, or scale it up to different sizes based on what’s needed.

...
...
...
...
...
...

Status Indicator

Add an online or offline status indicator to show user's availability.

...
...
...
...
...
...

Shape

Change the shape of an avatar with the default Bootstrap image classes.

...
...
...
...
...
...

Ratio

Change the proportional relationship between the width and height of an avatar to 4 by 3 with an .avatar-4by3 modifier.

...
...
...
...

Initials

You won't always have an image for every user, so easily use initials instead.

CF
CF
CF
CF
CF
CF

Groups

Easily group avatars of any size, shape and content with a single component. Each avatar can also use an to link to the corresponding profile.

...
...
...
CF
...
...
...
CF
...
...
...
CF