Bootstrap Images

Bootstrap image examples. Always try to do it the Bootstrap way!

Read More About Bootstrap Images Read More About the Bootstrap Layout Grid

^ Background image cover

The div above has a background image that fills the div no matter how it is responsively sized or stretched.

Fluid image

Responsive image

You will use this most of the time!

<img src="..." class="img-fluid" ...
Photos will scale up to the max cropped size
Full-width images should be cropped and sized to 2000px wide.

Thumbnail image

Thumbnail image

Thumbnails will also scale up to max cropped size, and they get a white border and light outline.

Round image

Round image

Photo must be cropped square (same height and width), and you add a custom ".rounded-div" class which rounds the img corners.

SVG logo

Copy vector outline from Illustrator and paste into a div, then change the svg's "width" and "height" properties to 100%.