Images
Bootstrap image utilities make common responsive media treatments easy to apply while preserving normal HTML image semantics.
Core concept
Explain img-fluid, thumbnail, rounded, object-fit utilities, alignment, responsive containers, and alt text. Distinguish intrinsic image dimensions from CSS display size.
Using it in a real interface
Show a responsive article image, circular profile photo, and thumbnail gallery. Explain how object-fit changes cropping when an image must occupy a fixed visual box.
Implementation notes
Use appropriately sized source images for performance. CSS can resize an image visually, but it does not automatically reduce the bytes transferred from the server.
ADVERTISEMENT