- ☀️Light
- 🌙Dark
- 💻System
📐 What are image utilities used for?
Image utilities help control how images behave inside responsive layouts. They ensure proper scaling, preserve aspect ratio, provide fluid resizing, and offer a built-in thumbnail style. These helpers allow you to use images cleanly across cards, articles, galleries, grids, or responsive layouts without custom CSS.
💠 Examples
Here are some examples showcasing each utility:
💻 HTML Code
📏 Image Utilities Reference
Below is the complete reference for all available image utilities.
.img
Base image class applying a global
border-radius using
--img-border-radius.
.img-responsive
Makes the image fully responsive:
max-width: 100%,
height: auto,
and object-fit: cover.
.img-fluid
Scales the image to fit its container width while maintaining
proportions, similar to Bootstrap’s .img-fluid.
.img-thumbnail
Wraps the image in a padded box with border and background: useful for previews, galleries, and UI components.
⚙️ Variables CSS
| Variable | Description |
|---|---|
--img-border-radius |
Border radius applied to images. |
--img-thumbnail-bg-color |
Background color of thumbnail images. |
--img-thumbnail-border-color |
Border color of thumbnail images. |
--img-thumbnail-border-style |
Border style of thumbnail images. |
--img-thumbnail-border-width |
Thickness of the thumbnail border. |
--img-thumbnail-padding |
Padding inside the thumbnail container. |