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

Class Properties
.h-fullheight: 100%;
.h-autoheight: auto
.h-0height: 0px;
.h-1height: 4px;
.h-2height: 8px;
.h-3height: 12px;
.h-4height: 16px;
.h-5height: 20px;
.h-6height: 24px;
.h-7height: 28px;
.h-8height: 32px;
.h-9height: 36px;
.h-10height: 40px;
.h-12height: 48px;
.h-16height: 64px;
.h-20height: 80px;
.h-24height: 96px;
.h-32height: 128px;
.h-40height: 160px;
.h-48height: 192px;
.h-56height: 224px;
.h-64height: 256px;
.h-80height: 320px;
.h-96height: 384px;
.h-112height: 448px;
.h-128height: 512px;
.h-144height: 576px;
.h-150height: 600px;
.max-h-fullmax-height: 100%;
.max-h-0max-height: 0px;
.max-h-1max-height: 4px;
.max-h-2max-height: 8px;
.max-h-3max-height: 12px;
.max-h-4max-height: 16px;
.max-h-5max-height: 20px;
.max-h-6max-height: 24px;
.max-h-7max-height: 28px;
.max-h-8max-height: 32px;
.max-h-9max-height: 36px;
.max-h-10max-height: 40px;
.max-h-12max-height: 48px;
.max-h-16max-height: 64px;
.max-h-20max-height: 80px;
.max-h-24max-height: 96px;
.max-h-32max-height: 128px;
.max-h-40max-height: 160px;
.max-h-48max-height: 192px;
.max-h-56max-height: 224px;
.max-h-64max-height: 256px;
.max-h-80max-height: 320px;
.max-h-96max-height: 384px;
.max-h-112max-height: 448px;
.max-h-128max-height: 512px;
.max-h-144max-height: 576px;
.max-h-150max-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>
1

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>