Bootstrap

Boostrap CSS Images

Bootstrap 5 Image CSS Classes

1. Responsive Images

Make images scale nicely to the parent container with:

  • .img-fluid — applies max-width: 100% and height: auto

html
<img src="photo.jpg" class="img-fluid" alt="Responsive image" />

2. Image Shapes

  • .rounded — Adds border-radius for rounded corners

  • .rounded-circle — Makes the image circular (perfect for profile pics)

  • .rounded-pill — Makes the image pill-shaped (rounded edges)

html
<img src="avatar.jpg" class="rounded" alt="Rounded corners" />
<img src="avatar.jpg" class="rounded-circle" alt="Circle shape" />
<img src="avatar.jpg" class="rounded-pill" alt="Pill shape" />

3. Image Thumbnails

Add a border and padding to create a thumbnail look:

  • .img-thumbnail

html
<img src="thumbnail.jpg" class="img-thumbnail" alt="Thumbnail image" />

4. Aligning Images

Use .float-start or .float-end to float images left or right:

html
<img src="photo.jpg" class="float-start me-3" alt="Left floated" />
<img src="photo.jpg" class="float-end ms-3" alt="Right floated" />

Add margin classes (me-3, ms-3) to create spacing around floated images.

5. Responsive Display Utilities

Control image visibility on different screen sizes with display utilities:

html
<img src="photo.jpg" class="d-none d-md-block" alt="Visible on md+" />

6. Figure Component

Bootstrap provides a nice wrapper .figure for images with captions:

html
<figure class="figure">
<img src="photo.jpg" class="figure-img img-fluid rounded" alt="Figure image" />
<figcaption class="figure-caption">This is a caption.</figcaption>
</figure>

Summary Table

Class Description
.img-fluid Responsive image scaling
.rounded Rounded corners
.rounded-circle Circular image
.rounded-pill Pill-shaped rounded image
.img-thumbnail Bordered thumbnail style
.float-start Float image left
.float-end Float image right
.figure Wrapper for images with caption

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *