Images
Image Rounded & Circle
Use
rounded class and rounded-circle class to show an image with a round border and rounded shape respectively.
HTML Preview
<!-- 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/48/avatar-4.jpg">
Image Thumbnails
Use img-thumbnail class to give an image rounded 1px border appearance.
HTML Preview
<!-- 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/48/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="assets/images/users/48/avatar-2.jpg" alt="" class="rounded avatar-xxs"><img src="assets/images/users/48/avatar-10.jpg" alt="" class="rounded avatar-xs"><img src="assets/images/users/48/avatar-3.jpg" alt="" class="rounded avatar-sm"><img src="assets/images/users/48/avatar-4.jpg" alt="" class="rounded avatar-md"><img src="assets/images/users/48/avatar-5.jpg" alt="" class="rounded avatar-lg"><img src="assets/images/users/48/avatar-8.jpg" alt="" class="rounded avatar-xl"><img src="assets/images/users/48/avatar-2.jpg" alt="" class="rounded-circle avatar-xxs"><img src="assets/images/users/48/avatar-10.jpg" alt="" class="rounded-circle avatar-xs"><img src="assets/images/users/48/avatar-3.jpg" alt="" class="rounded-circle avatar-sm"><img src="assets/images/users/48/avatar-4.jpg" alt="" class="rounded-circle avatar-md"><img src="assets/images/users/48/avatar-5.jpg" alt="" class="rounded-circle avatar-lg"><img src="assets/images/users/48/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
HTML Preview
<!-- Simple Group --> <div class="avatar-group"> <div class="avatar-group-item"> <img src="assets/images/users/48/avatar-4.jpg" alt="" class="rounded-circle avatar-sm"> </div> <div class="avatar-group-item"> <img src="assets/images/users/48/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/48/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/48/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/48/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.
HTML Preview
<!-- 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
Responsive Images with img-fluid,max-width: 100%; and height: auto; to the image so that it scales with the parent width.
HTML Preview
<!-- Responsive Images -->
<img src="assets/images/small/img-2.jpg" class="img-fluid" alt="Responsive image">
Loading...
Customizer
Steex Builder
Choose your themes & layouts etc.
Layout
Choose your layout
Vertical
Horizontal
Two Column
Theme
Choose your suitable Theme.
Default
Material
Creative
Minimal
Modern
Interaction
Color Scheme
Choose Light or Dark Scheme.
Light
Dark
Coming Soon
Brand
Layout Width
Choose Fluid or Boxed layout.
Fluid
Boxed
Layout Position
Choose Fixed or Scrollable Layout Position.
Topbar Color
Choose Light or Dark Topbar Color.