Images

Preview

This is a preview of the Bootstrap element. For more details, please visit the official Bootstrap page.

Examples

Responsive images

.img-fluid makes the image scale with the parent element. Default behaviour for the image is otherwise to overflow the parent element.

<div style="max-width: 300px;">
    <img src="..." class="img-fluid">
</div>

Thumbnails

This applies the styling of a "thumbnail".

<img src="..." class="img-thumbnail" style="width: 100px;">

Aligning images

Align images with the helper float classes or text alignment classes. block-level images can be centered using the .mx-auto margin utility class.

<img src="..." class="float-start"> <!-- Left align -->
<img src="..." class="float-end"> <!-- Right align -->
<img src="..." class="d-block mx-auto"> <!-- Center align -->

<div class="text-center"> <!-- Center align -->
    <img src="...">
</div>