#### Sizing - Images

Create and group avatars of different sizes and shapes with the css classes. Using Bootstrap's naming convention, you can control size of avatar including standard avatar, or scale it up to different sizes.

`.avatar-xs`

`.avatar-sm`

`.avatar-md`

`.avatar-lg`

`.avatar-xl`

#### Sizing - Background Color

Using utilities classes of background e.g. `bg-*` allows you to have any background color as well.

xs

Using `.avatar-xs`

sm

Using `.avatar-sm`

MD

Using `.avatar-md`

LG

Using `.avatar-lg`

XL

Using `.avatar-xl`

#### Rounded Circle

Using an additional class `.rounded-circle` in `<img>` element creates the rounded avatar.

`.avatar-md .rounded-circle`

`.avatar-lg .rounded-circle`

`.avatar-xl .rounded-circle`

#### Rounded Circle Background

Using an additional class `.rounded-circle` in `<img>` element creates the rounded avatar.

MD

`.avatar-md .rounded-circle`

LG

`.avatar-lg .rounded-circle`

XL

`.avatar-xl .rounded-circle`

#### Avatar Group

Create and group avatars of different sizes and shapes with the css classes. Using Bootstrap's naming convention, you can control size of avatar including standard avatar, or scale it up to different sizes.

D
K
H
L
G
D
K
H
L
G
T
9+

#### Images Shapes

Avatars with different sizes and shapes.

`.rounded`

`.rounded`

`.rounded-circle`

`.img-thumbnail`

`.rounded-circle .img-thumbnail`

##### Theme Settings

##### Color Scheme

##### Light

##### Dark

##### Layout Mode

##### Fluid

##### Detached

##### Menu Color

##### Light

##### Dark

##### Sidebar Size

##### Default

##### Compact

##### Condensed

##### Hover View

##### Full Layout

##### Hidden

##### Container Width

Full Boxed

##### Layout Position

Fixed Scrollable
Buy Now