Images | Velzon - Admin & Dashboard Template

#### Are you sure ?

Are you sure you want to remove this Notification ?

#### Images

#### Image Rounded & Circle

Show Code

Use `rounded` class and `rounded-circle` class to show an image with a round border and rounded shape respectively.

    <!-- Rounded Image -->
    <img class="rounded" alt="200x200" width="200" src="assets/images/small/img-4.jpg">

    <!-- Rounded-circle Image -->
    <img class="rounded-circle avatar-xl" alt="200x200" src="assets/images/users/avatar-4.jpg">

#### Image Thumbnails

Show Code

Use `img-thumbnail` class to give an image rounded 1px border appearance.

    <!-- Thumbnails Images -->
    <img class="img-thumbnail" alt="200x200" width="200" src="assets/images/small/img-3.jpg">

    <img class="img-thumbnail rounded-circle avatar-xl" alt="200x200" src="assets/images/users/avatar-3.jpg">

#### Image Sizes

Show Code

Use `avatar-xxs`, `avatar-xs`, `avatar-sm`, `avatar-md`, `avatar-lg`, `avatar-xl` class for different image sizes.

`avatar-xxs`

`avatar-xs`

`avatar-sm`

`avatar-md`

`avatar-lg`

`avatar-xl`

`avatar-xxs`

`avatar-xs`

`avatar-sm`

`avatar-md`

`avatar-lg`

`avatar-xl`

    <!-- Image Sizes -->
    <img src="assets/images/users/avatar-2.jpg" alt="" class="rounded avatar-xxs">

    <img src="assets/images/users/avatar-10.jpg" alt="" class="rounded avatar-xs">

    <img src="assets/images/users/avatar-3.jpg" alt="" class="rounded avatar-sm">

    <img src="assets/images/users/avatar-4.jpg" alt="" class="rounded avatar-md">

    <img src="assets/images/users/avatar-5.jpg" alt="" class="rounded avatar-lg">

    <img src="assets/images/users/avatar-8.jpg" alt="" class="rounded avatar-xl">

    <img src="assets/images/users/avatar-2.jpg" alt="" class="rounded-circle avatar-xxs">

    <img src="assets/images/users/avatar-10.jpg" alt="" class="rounded-circle avatar-xs">

    <img src="assets/images/users/avatar-3.jpg" alt="" class="rounded-circle avatar-sm">

    <img src="assets/images/users/avatar-4.jpg" alt="" class="rounded-circle avatar-md">

    <img src="assets/images/users/avatar-5.jpg" alt="" class="rounded-circle avatar-lg">

    <img src="assets/images/users/avatar-8.jpg" alt="" class="rounded-circle avatar-xl">

#### Avatar With Content

Show Code

Use `avatar-xxs, avatar-xs,avatar-sm,avatar-md,avatar-lg,avatar-xl` class to set different avatar content.

XXS
XS
SM
MD
LG
XL

    <!-- Avatar With Content -->
    <div class="avatar-xxs">
        <div class="avatar-title rounded bg-primary-subtle text-primary">
            XXS
        </div>
    </div>

    <div class="avatar-xs">
        <div class="avatar-title rounded bg-secondary-subtle text-secondary">
            XS
        </div>
    </div>

    <div class="avatar-sm">
        <div class="avatar-title rounded bg-success-subtle text-success">
            Sm
        </div>
    </div>

    <div class="avatar-md">
        <div class="avatar-title rounded bg-info-subtle text-info">
            Md
        </div>
    </div>

    <div class="avatar-lg">
        <div class="avatar-title rounded bg-warning-subtle text-warning">
            Lg
        </div>
    </div>

    <div class="avatar-xl">
        <div class="avatar-title rounded bg-danger-subtle text-danger">
            Xl
        </div>
    </div>

#### Avatar Group

Show Code

Use `avatar-group` class to show avatar images with the group.

A

Use `avatar-group` class with `data-bs-toggle="tooltip"` to show avatar group images with tooltip.

C
2+

    <!-- Simple Group -->
    <div class="avatar-group">
        <div class="avatar-group-item">
            <img src="assets/images/users/avatar-4.jpg" alt="" class="rounded-circle avatar-sm">
        </div>
        <div class="avatar-group-item">
            <img src="assets/images/users/avatar-5.jpg" alt="" class="rounded-circle avatar-sm">
        </div>
        <div class="avatar-group-item">
            <div class="avatar-sm">
                <div class="avatar-title rounded-circle bg-light text-primary">
                    A
                </div>
            </div>
        </div>
        <div class="avatar-group-item">
            <img src="assets/images/users/avatar-2.jpg" alt="" class="rounded-circle avatar-sm">
        </div>
    </div>

    <!-- Avatar Group with Tooltip -->
    <div class="avatar-group">
        <a href="javascript: void(0);" class="avatar-group-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Christi">
            <img src="assets/images/users/avatar-4.jpg" alt="" class="rounded-circle avatar-sm">
        </a>
        <a href="javascript: void(0);" class="avatar-group-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Frank Hook">
            <img src="assets/images/users/avatar-3.jpg" alt="" class="rounded-circle avatar-sm">
        </a>
        <a href="javascript: void(0);" class="avatar-group-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Christi">
            <div class="avatar-sm">
                <div class="avatar-title rounded-circle bg-light text-primary">
                    C
                </div>
            </div>
        </a>
        <a href="javascript: void(0);" class="avatar-group-item" data-bs-toggle="tooltip" data-bs-placement="top" title="more">
            <div class="avatar-sm">
                <div class="avatar-title rounded-circle">
                    2+
                </div>
            </div>
        </a>
    </div>

#### Figures

Show Code

Use the included `figure`, `figure-img` and `figure-caption` classes to provide some baseline styles for the HTML5 `<figure>` and `<figcaption>` elements.

A caption for the above image.
A caption for the above image.

    <!-- figures Images -->
    <figure class="figure">
        <img src="assets/images/small/img-4.jpg" class="figure-img img-fluid rounded" alt="...">
        <figcaption class="figure-caption">A caption for the above image.</figcaption>
    </figure>

    <figure class="figure mb-0">
        <img src="assets/images/small/img-5.jpg" class="figure-img img-fluid rounded" alt="...">
        <figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
    </figure>

#### Responsive Images

Show Code

Responsive Images with `img-fluid,max-width: 100%; and height: auto;` to the image so that it scales with the parent width.

    <!-- Responsive Images -->
    <img src="assets/images/small/img-2.jpg" class="img-fluid" alt="Responsive image">

Loading...

##### Theme Customizer

###### Layout

Choose your layout

##### Vertical

##### Horizontal

##### Two Column

##### Semi Box

###### Color Scheme

Choose Light or Dark Scheme.

##### Light

##### Dark

###### Layout Width

Choose Fluid or Boxed layout.

##### Fluid

##### Boxed

###### Layout Position

Choose Fixed or Scrollable Layout Position.

Fixed Scrollable

###### Topbar Color

Choose Light or Dark Topbar Color.

##### Light

##### Dark

###### Background Image

Choose a body background image.

##### None

##### One

##### Two

##### Three