Height
Responsive
| Class | Properties |
|---|---|
| .h-full | height: 100%; |
| .h-auto | height: auto |
| .h-0 | height: 0px; |
| .h-1 | height: 4px; |
| .h-2 | height: 8px; |
| .h-3 | height: 12px; |
| .h-4 | height: 16px; |
| .h-5 | height: 20px; |
| .h-6 | height: 24px; |
| .h-7 | height: 28px; |
| .h-8 | height: 32px; |
| .h-9 | height: 36px; |
| .h-10 | height: 40px; |
| .h-12 | height: 48px; |
| .h-16 | height: 64px; |
| .h-20 | height: 80px; |
| .h-24 | height: 96px; |
| .h-32 | height: 128px; |
| .h-40 | height: 160px; |
| .h-48 | height: 192px; |
| .h-56 | height: 224px; |
| .h-64 | height: 256px; |
| .h-80 | height: 320px; |
| .h-96 | height: 384px; |
| .h-112 | height: 448px; |
| .h-128 | height: 512px; |
| .h-144 | height: 576px; |
| .h-150 | height: 600px; |
| .max-h-full | max-height: 100%; |
| .max-h-0 | max-height: 0px; |
| .max-h-1 | max-height: 4px; |
| .max-h-2 | max-height: 8px; |
| .max-h-3 | max-height: 12px; |
| .max-h-4 | max-height: 16px; |
| .max-h-5 | max-height: 20px; |
| .max-h-6 | max-height: 24px; |
| .max-h-7 | max-height: 28px; |
| .max-h-8 | max-height: 32px; |
| .max-h-9 | max-height: 36px; |
| .max-h-10 | max-height: 40px; |
| .max-h-12 | max-height: 48px; |
| .max-h-16 | max-height: 64px; |
| .max-h-20 | max-height: 80px; |
| .max-h-24 | max-height: 96px; |
| .max-h-32 | max-height: 128px; |
| .max-h-40 | max-height: 160px; |
| .max-h-48 | max-height: 192px; |
| .max-h-56 | max-height: 224px; |
| .max-h-64 | max-height: 256px; |
| .max-h-80 | max-height: 320px; |
| .max-h-96 | max-height: 384px; |
| .max-h-112 | max-height: 448px; |
| .max-h-128 | max-height: 512px; |
| .max-h-144 | max-height: 576px; |
| .max-h-150 | max-height: 600px; |
Usage
Like the padding utilities it uses 4px as the increment size for each number. So h-10 is 10 * 4px which is 40px. To do 100% height you can use h-full. These height and max-height 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-h-12 h-full" /> /* image 48px width */
<img src="#" class="max-h-150 h-full" /> /* image 600px width, use this for an image that is "full width" in a container in an email */
In combination with the width utilities you can do things like make a circle with number in it.
<div class="h-10 w-10 rounded-full bg-blue-500 text-white text-center valign-middle">1</div>
Responsive
By default these classes target all devices. However if you just wanted to target desktop you could do .h-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 40px height centered button on desktop. That would look like this:
<a class="h-full h-lg-10 align-center btn btn-primary btn-lg" href="https://bootstrapemail.com">Tada</a>
Compiled Example
Input
<div class="h-10 w-10 rounded-full bg-blue-500 text-white text-center valign-middle">1</div>
Output
<table class="h-10 w-10 rounded-full bg-blue-500 text-white text-center valign-middle w-full" role="presentation" style="border-radius: 9999px; color: #ffffff; width: 40px; height: 40px; text-align: center !important; vertical-align: middle !important;" bgcolor="#0d6efd" width="40" height="40">
<tbody>
<tr>
<td style="line-height: 24px; font-size: 16px; border-radius: 9999px; color: #ffffff; width: 40px; height: 40px; margin: 0;" align="center" bgcolor="#0d6efd" valign="middle" width="40" height="40">
1
</td>
</tr>
</tbody>
</table>