Width
Responsive
Set the width or max width of an element.
| Class | Properties |
|---|---|
| .w-full | width: 100%; |
| .w-auto | width: auto |
| .w-0 | width: 0px; |
| .w-1 | width: 4px; |
| .w-2 | width: 8px; |
| .w-3 | width: 12px; |
| .w-4 | width: 16px; |
| .w-5 | width: 20px; |
| .w-6 | width: 24px; |
| .w-7 | width: 28px; |
| .w-8 | width: 32px; |
| .w-9 | width: 36px; |
| .w-10 | width: 40px; |
| .w-12 | width: 48px; |
| .w-16 | width: 64px; |
| .w-20 | width: 80px; |
| .w-24 | width: 96px; |
| .w-32 | width: 128px; |
| .w-40 | width: 160px; |
| .w-48 | width: 192px; |
| .w-56 | width: 224px; |
| .w-64 | width: 256px; |
| .w-80 | width: 320px; |
| .w-96 | width: 384px; |
| .w-112 | width: 448px; |
| .w-128 | width: 512px; |
| .w-144 | width: 576px; |
| .w-150 | width: 600px; |
| .max-w-full | max-width: 100%; |
| .max-w-0 | max-width: 0px; |
| .max-w-1 | max-width: 4px; |
| .max-w-2 | max-width: 8px; |
| .max-w-3 | max-width: 12px; |
| .max-w-4 | max-width: 16px; |
| .max-w-5 | max-width: 20px; |
| .max-w-6 | max-width: 24px; |
| .max-w-7 | max-width: 28px; |
| .max-w-8 | max-width: 32px; |
| .max-w-9 | max-width: 36px; |
| .max-w-10 | max-width: 40px; |
| .max-w-12 | max-width: 48px; |
| .max-w-16 | max-width: 64px; |
| .max-w-20 | max-width: 80px; |
| .max-w-24 | max-width: 96px; |
| .max-w-32 | max-width: 128px; |
| .max-w-40 | max-width: 160px; |
| .max-w-48 | max-width: 192px; |
| .max-w-56 | max-width: 224px; |
| .max-w-64 | max-width: 256px; |
| .max-w-80 | max-width: 320px; |
| .max-w-96 | max-width: 384px; |
| .max-w-112 | max-width: 448px; |
| .max-w-128 | max-width: 512px; |
| .max-w-144 | max-width: 576px; |
| .max-w-150 | max-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 👍