ITATS Design System

Responsive Images

Add .img-fluid to make images scale responsively — max-width: 100%, height: auto.

Image above uses img-fluid — scales to fit its container.

Show Code

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

Image Thumbnail

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

Show Code

<!-- Square thumbnail -->
<img src="image.jpg" class="img-thumbnail" alt="Thumbnail">

<!-- Circular thumbnail -->
<img src="image.jpg" class="img-thumbnail rounded-circle" alt="Circular thumbnail">

Image Alignment

Float images left or right, or use .d-block with mx-auto to center.

Float start — the image floats to the left, and text wraps around it. Use .float-start combined with a margin end utility like me-3 to add spacing between the image and surrounding content.

Float end — the image floats to the right. Use .float-end with ms-3 for spacing.

Centered with d-block mx-auto

Show Code

<!-- Float left -->
<img src="image.jpg" class="float-start me-3" alt="...">

<!-- Float right -->
<img src="image.jpg" class="float-end ms-3" alt="...">

<!-- Centered -->
<img src="image.jpg" class="d-block mx-auto" alt="...">

Object Fit

Use .object-fit-{value} to control how content fits inside a container: contain, cover, fill, scale, none.

object-fit-cover

object-fit-contain

object-fit-fill

object-fit-none

Show Code

<img src="image.jpg" class="object-fit-cover" style="width: 160px; height: 100px;" alt="...">
<img src="image.jpg" class="object-fit-contain" style="width: 160px; height: 100px;" alt="...">
<img src="image.jpg" class="object-fit-fill" style="width: 160px; height: 100px;" alt="...">
<img src="image.jpg" class="object-fit-scale" style="width: 160px; height: 100px;" alt="...">
<img src="image.jpg" class="object-fit-none" style="width: 160px; height: 100px;" alt="...">

Avatar Patterns

Common avatar patterns using Bootstrap image utilities.

32px

40px

56px

80px

Rounded

Show Code

<!-- Circular avatar -->
<img src="photo.jpg"
  class="rounded-circle object-fit-cover"
  style="width: 40px; height: 40px;"
  alt="User avatar">

<!-- Rounded square avatar -->
<img src="photo.jpg"
  class="rounded object-fit-cover"
  style="width: 56px; height: 56px;"
  alt="User avatar">