These docs are for the prereleased 1.0.0.alpha3 version of Bootstrap Email - Give Feedback
Set the width or max width of an element.

Class Properties
.w-fullwidth: 100%;
.w-autowidth: auto
.w-0width: 0px;
.w-1width: 4px;
.w-2width: 8px;
.w-3width: 12px;
.w-4width: 16px;
.w-5width: 20px;
.w-6width: 24px;
.w-7width: 28px;
.w-8width: 32px;
.w-9width: 36px;
.w-10width: 40px;
.w-12width: 48px;
.w-16width: 64px;
.w-20width: 80px;
.w-24width: 96px;
.w-32width: 128px;
.w-40width: 160px;
.w-48width: 192px;
.w-56width: 224px;
.w-64width: 256px;
.w-80width: 320px;
.w-96width: 384px;
.w-112width: 448px;
.w-128width: 512px;
.w-144width: 576px;
.w-150width: 600px;
.max-w-fullmax-width: 100%;
.max-w-0max-width: 0px;
.max-w-1max-width: 4px;
.max-w-2max-width: 8px;
.max-w-3max-width: 12px;
.max-w-4max-width: 16px;
.max-w-5max-width: 20px;
.max-w-6max-width: 24px;
.max-w-7max-width: 28px;
.max-w-8max-width: 32px;
.max-w-9max-width: 36px;
.max-w-10max-width: 40px;
.max-w-12max-width: 48px;
.max-w-16max-width: 64px;
.max-w-20max-width: 80px;
.max-w-24max-width: 96px;
.max-w-32max-width: 128px;
.max-w-40max-width: 160px;
.max-w-48max-width: 192px;
.max-w-56max-width: 224px;
.max-w-64max-width: 256px;
.max-w-80max-width: 320px;
.max-w-96max-width: 384px;
.max-w-112max-width: 448px;
.max-w-128max-width: 512px;
.max-w-144max-width: 576px;
.max-w-150max-width: 600px;

Usage

Like the padding utilities it uses 4px as the increment size for each number. So w-10 is 10 * 4px which is 40px. To do 100% width you can use w-full. These width and max-width utilities are really useful for images because images need a width and/or a height for them to be rendered properly in many versions of Outlook.

<img src="#" class="max-w-12 w-full" /> /* image 48px width */
<img src="#" class="max-w-150 w-full" /> /* image 600px width, use this for an image that is "full width" in a container in an email */

Responsive

By default these classes target all devices. However if you just wanted to target desktop you could do .w-lg-4. For all of these classes you can apply a lg- to the middle to make it just apply to desktop devices. Or say you want a 100% button on mobile and a auto width centered button on desktop. That would look like this:

<a class="w-full w-lg-auto align-center btn btn-primary btn-lg" href="https://bootstrapemail.com">Tada</a>
The documentation on this page is no complete yet, work in progress 👍