Make media scale with img-fluid (max-width: 100%; height: auto). Shape helpers: rounded, rounded-circle, img-thumbnail. Pair with semantic <figure> and <figcaption> from HTML images.
Layout integration
- Grid columns constrain width;
img-fluidprevents overflow float-md-start me-md-3— classic text-wrap around images on wider screensratio ratio-16x9— embed responsive video or maps with fixed aspect ratio
Important interview questions and answers
- Q: img-fluid vs width 100% inline?
A:img-fluidalso sets height auto to preserve aspect ratio—safer default for responsive images. - Q: When use ratio?
A: When the container must keep 16:9 (or other) proportions regardless of content—videos, map embeds, skeleton placeholders.
Self-check
- Which class keeps an image from overflowing its column?
- What element wraps a caption beneath an illustration?