Day 3 - Image Styling

Learn how to style images with Bootstrap's utility classes.

1. Responsive Images

Use .img-fluid to make an image responsive. It applies max-width: 100%; and height: auto; so the image scales with the parent element.

Example

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

Example

You can align images using float utilities or margin utilities for block elements.

Float Start (Left)

This text wraps around the image because the image is floated to the start (left).

Float End (Right)

This text wraps around the image because the image is floated to the end (right).

Centered (Block)

Use .mx-auto and .d-block to center an image.

Use border radius utilities to round the corners of your images.