Images

  1. Bootstrap UI
  2. Images
Customizer
Judia Builder

Choose your themes & layouts etc.

Select Layouts

Choose your layout.

Vertical
Horizontal
Color Scheme

Choose Light or Dark Scheme.

Light
Dark
Brand
Card Layout

Choose borderless or border layout.

Borderless
Border
Layout Width

Choose Fluid or Boxed layout.

Fluid
Boxed
Layout Position

Choose Fixed or Scrollable Layout Position.

Topbar Color

Choose Light, Dark or Brand Topbar Color.

Light
Dark
Brand
Topbar Images

Choose Topbar Images.

Preloader

Choose a preloader.

Enable
Disable
Buy Now

Image Rounded & Circle

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

200x200
200x200
HTML Preview
<!-- Rounded Image -->
<img class="rounded" alt="200x200" width="200" src="https://img.themesbrand.com/judia/small/img-4.jpg">

<!-- Rounded-circle Image -->
<img class="rounded-circle avatar-xl" alt="200x200" src="https://img.themesbrand.com/judia/users/avatar-4.jpg">

Image Thumbnails

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

200x200
200x200
HTML Preview
<!-- Thumbnails Images -->
<img class="img-thumbnail" alt="200x200" width="200" src="https://img.themesbrand.com/judia/small/img-3.jpg">

<img class="img-thumbnail rounded-circle avatar-xl" alt="200x200" src="https://img.themesbrand.com/judia/users/avatar-3.jpg">

Image Sizes

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

HTML Preview
<!-- Image Sizes -->
<img src="https://img.themesbrand.com/judia/users/avatar-2.jpg" alt="" class="rounded avatar-xxs">

<img src="https://img.themesbrand.com/judia/users/avatar-10.jpg" alt="" class="rounded avatar-xs">

<img src="https://img.themesbrand.com/judia/users/avatar-3.jpg" alt="" class="rounded avatar-sm">

<img src="https://img.themesbrand.com/judia/users/avatar-4.jpg" alt="" class="rounded avatar-md">

<img src="https://img.themesbrand.com/judia/users/avatar-5.jpg" alt="" class="rounded avatar-lg">

<img src="https://img.themesbrand.com/judia/users/avatar-8.jpg" alt="" class="rounded avatar-xl">

<img src="https://img.themesbrand.com/judia/users/avatar-2.jpg" alt="" class="rounded-circle avatar-xxs">

<img src="https://img.themesbrand.com/judia/users/avatar-10.jpg" alt="" class="rounded-circle avatar-xs">

<img src="https://img.themesbrand.com/judia/users/avatar-3.jpg" alt="" class="rounded-circle avatar-sm">

<img src="https://img.themesbrand.com/judia/users/avatar-4.jpg" alt="" class="rounded-circle avatar-md">

<img src="https://img.themesbrand.com/judia/users/avatar-5.jpg" alt="" class="rounded-circle avatar-lg">

<img src="https://img.themesbrand.com/judia/users/avatar-8.jpg" alt="" class="rounded-circle avatar-xl">

Avatar With Content

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
HTML Preview
<!-- 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

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+
HTML Preview
<!-- Simple Group -->
<div class="avatar-group">
    <div class="avatar-group-item">
        <img src="https://img.themesbrand.com/judia/users/avatar-4.jpg" alt="" class="rounded-circle avatar-sm">
    </div>
    <div class="avatar-group-item">
        <img src="https://img.themesbrand.com/judia/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="https://img.themesbrand.com/judia/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="https://img.themesbrand.com/judia/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="https://img.themesbrand.com/judia/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

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.
HTML Preview
<!-- figures Images -->
<figure class="figure">
    <img src="https://img.themesbrand.com/judia/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="https://img.themesbrand.com/judia/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

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

Responsive image
HTML Preview
<!-- Responsive Images -->
<img src="https://img.themesbrand.com/judia/small/img-2.jpg" class="img-fluid" alt="Responsive image">
© Judia.
Design & Develop by Themesbrand