Images

Responsive images#

With .img-fluid, images in UX4G are made responsive. The picture is given the attributes max-width: 100%; and height: auto; to scale with the parent width.

<img width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" />

Result

Image thumbnails #

You can give an image a rounded 1px border using .img-thumbnail in addition to our border-radius tools.

Aligning images #

Use text alignment classes or auxiliary float classes to align pictures. The .mx-auto margin utility class can be used to centre pictures at the block level.

<div>
  <img width="200" height="200" class="rounded float-start"/>
  <img width="200" height="200" class="rounded float-end"/>
</div>

Result

<img width="200" height="200" class="rounded mx-auto d-block"/>

Result

<div class="text-center">
  <img width="200" height="200" class="rounded"/>
</div>

Result

Picture #

Be careful to apply the .img-* classes to the <img> and not the <picture> tag if you use the <picture> element to provide several <source> elements for a specific <img>.

<picture>
  <source srcset="..." type="image/svg+xml"/>
  <img src="..." class="img-fluid img-thumbnail" alt="..."/>
</picture>

Previous « Figures

Next Reboot »

Images

Responsive images#

Result

Image thumbnails #

Aligning images #

Result

Result

Result

Picture #

Result

Accessibility options