SCIFI - Codeigniter Bootstrap 5 Premium Admin & Dashboard Template

Image Left Align

<img class="rounded float-start" src="https://codeigniter.spruko.com/scifi/scifi/assets/images/media/media-53.jpg" alt="...">

Image Center Align

<img class="rounded mx-auto d-block" src="https://codeigniter.spruko.com/scifi/scifi/assets/images/media/media-55.jpg" alt="...">

Image Right Align

<img class="rounded float-end" src="https://codeigniter.spruko.com/scifi/scifi/assets/images/media/media-54.jpg" alt="...">

Responsive image

Use .img-fluid class to the img tag to get responsive image.

<div class="text-center">
    <img src="https://codeigniter.spruko.com/scifi/scifi/assets/images/media/media-48.jpg" class="img-fluid" alt="...">
</div>

Image With Radius

Use .rounded class along with .img-fluid to get border radius.

<div class="text-center">
    <img src="https://codeigniter.spruko.com/scifi/scifi/assets/images/media/media-49.jpg" class="img-fluid rounded" alt="...">
</div>

Rounded Image

Use .rounded-pill class to img tag to get rounded image.

<div class="text-center">
    <img src="https://codeigniter.spruko.com/scifi/scifi/assets/images/media/media-50.jpg" class="img-fluid rounded-pill" alt="...">
</div>

Figures

<figure class="figure">
    <img class="bd-placeholder-img figure-img img-fluid rounded card-img" src="https://codeigniter.spruko.com/scifi/scifi/assets/images/media/media-56.jpg" alt="...">
    <figcaption class="figure-caption">A caption for the above image.
    </figcaption>
</figure>
<figure class="figure float-end">
    <img class="bd-placeholder-img figure-img img-fluid rounded card-img" src="https://codeigniter.spruko.com/scifi/scifi/assets/images/media/media-57.jpg" alt="...">
    <figcaption class="figure-caption text-end">A caption for the above image.
    </figcaption>
</figure>

Image Thumbnail

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

<div class="text-center">
    <img src="https://codeigniter.spruko.com/scifi/scifi/assets/images/media/media-51.jpg" class="img-thumbnail" alt="...">
</div>

Rounded Thumbnail

Use .rounded-pill along with .img-thummbnail to get radius.

<div class="text-center">
    <img src="https://codeigniter.spruko.com/scifi/scifi/assets/images/media/media-52.jpg" class="img-thumbnail rounded-pill" alt="...">
</div>

Switcher

Shortcuts

Elizabeth Ava2

George Rhys1

Bethany Isla2

Margaret Emma1

Michael Souris1

Olivia Lily1

Smith Brown2

Wilson Li24

Jones Morton3

White Lee1

Wilfrid Price3

Jasmin O'Kon

River Gleichner

Saul Goodmate1

Edgardo Huel

Find out more !

Notifications :

App :

Remaiders :

This Is Not You're Looking For?