These docs are for the prereleased 1.0.0.alpha2 version of Bootstrap Email - Give Feedback
Images are made simple with Bootstrap Email.

Class Result
.img-fluid height: auto;
max-width: 100%;
width: 100%;

Usage

Images can be very complicated in emails. Luckily Bootstrap email makes it easy. Images need to have at leave have either a width or a height for them to render properly in something like Outlook. To keep an element full width of it’s container, give it the img-fluid. Doing so will set properties like the width="100%" attribute on the img tag which is required for Outlook rendering.

<img class="img-fluid" src="https://bootstrapemail.com/some/image.png" alt="Some Image" />

For doing something other than 100% image with, use the sizing width and height utility classes with your images: Width Docs & Height Docs.


Accessibility

Make sure you include a descriptive alt property on every image, not only does this help with accessibility but it’s not uncommon for images to be blocked in an email client and this helps user see what image is being blocked. More on alt tags


Compiled Example

Input

<img class="img-fluid" src="https://bootstrapemail.com/some/image.png" alt="Some Image" />

Output

<img class="img-fluid" src="https://bootstrapemail.com/some/image.png" alt="Some Image" style="height: auto; line-height: 100%; outline: none; text-decoration: none; display: block; max-width: 100%; width: 100%; border: 0 none;" width="100%">