Images Component
Responsive image shapes, avatar sizing variations, thumbnail borders, and figure captions.
Image Shapes
Add classes to an `<img>` element to easily style images with rounded corners, circular crops, or thumbnail borders.
Avatar Image Sizes
Use avatar utility sizing classes (`.avatar-xs`, `.avatar-sm`, `.avatar-md`, `.avatar-lg`, `.avatar-xl`) for profile pictures.
Directional Border-Radius
Round specific corners of an image using directional border-radius classes (`.rounded-top`, `.rounded-end`, `.rounded-bottom`, `.rounded-start`).
Image Alignment & Figure Captions
Align images using helper classes (`.float-start`, `.float-end`, `.mx-auto .d-block`) and figure captions.
This image is floated to the left using `.float-start`. Text wraps naturally around it.
Reusable Code Snippets
Copy and paste these image styling snippets directly into your workspace files.
<img src="assets/images/user_1.jpg" class="avatar-md rounded-circle" alt="User">
<img src="assets/images/user_2.jpg" class="avatar-lg img-thumbnail" alt="User">
<figure class="figure">
<img src="assets/images/card-cover-1.jpg" class="figure-img img-fluid rounded" alt="Cover">
<figcaption class="figure-caption">Image caption</figcaption>
</figure>