Vertical Align

<p class="text-3xl mb-0 bg-surface-3 rounded-lg p-2">Ag <span class="align-baseline text-base bg-primary-subtle px-1">baseline</span> <span class="align-top text-base bg-primary-subtle px-1">top</span> <span class="align-middle text-base bg-primary-subtle px-1">middle</span> <span class="align-bottom text-base bg-primary-subtle px-1">bottom</span> <span class="align-text-top text-base bg-success-subtle px-1">text-top</span> <span class="align-text-bottom text-base bg-success-subtle px-1">text-bottom</span> </p>

<table class="table table-bordered small mb-0">
  <tbody>
    <tr style="height:110px">
      <td class="align-top">align-top</td>
      <td class="align-middle">align-middle</td>
      <td class="align-bottom">align-bottom</td>
    </tr>
  </tbody>
</table>

<div class="table-responsive">
  <table class="table align-middle mb-0 small">
    <tbody>
      <tr>
        <td><img src="../assets/img/avatar-1.svg" alt="" width="40" height="40" class="rounded-full"></td>
        <td>Lea Whitaker</td>
        <td><button type="button" class="btn btn-sm btn-outline-primary">Message</button></td>
      </tr>
      <tr>
        <td><img src="../assets/img/avatar-2.svg" alt="" width="40" height="40" class="rounded-full"></td>
        <td>Ethan Ortega</td>
        <td><button type="button" class="btn btn-sm btn-outline-primary">Message</button></td>
      </tr>
    </tbody>
  </table>
</div>

<p class="mb-0"><span class="text-xl align-middle text-primary-ink"><i class="bi bi-info-circle-fill" aria-hidden="true"></i></span> <span class="align-middle">Our packaging is plastic-free and every delivery is carbon-neutral.</span></p>

<p class="mb-0">Written by <img src="../assets/img/avatar-8.svg" alt="" width="22" height="22" class="rounded-full align-text-bottom"> <strong>Luna Alvarez</strong> on Nov 9, 2025.</p>

<h3 class="h4 mb-0">Our guide to gifts under $50 <span class="badge text-bg-primary text-base align-middle">New</span></h3>

<div class="font-bold">
  <span class="text-lg align-top">$</span><span class="display-5">66</span><span class="text-lg align-baseline">.55</span><span class="small text-muted font-normal"> / mo</span>
</div>

<p class="mb-0"><input class="form-check-input align-middle" type="checkbox" id="ut-copy-1261" checked> <label class="align-middle" for="ut-copy-1261">Send me a copy of A beginner&#39;s guide to getting started</label></p>

<div class="bg-surface-3 rounded-lg p-2">
  <span class="inline-block bg-primary-subtle rounded-md p-2 align-top" style="height:80px">top</span> <span class="inline-block bg-primary-subtle rounded-md p-2 align-middle">middle</span> <span class="inline-block bg-primary-subtle rounded-md p-2 align-bottom">bottom</span> <span class="inline-block bg-success-subtle rounded-md p-2 align-middle" style="height:50px">middle 50px</span> 
</div>

<table class="table table-sm small mb-0">
  <thead>
    <tr>
      <th scope="col">Item</th>
      <th scope="col" class="text-end">Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Running cap<br><span class="text-muted">Apparel</span><br><span class="text-muted">Qty 5</span></td>
      <td class="align-bottom text-end font-semibold">$234.64</td>
    </tr>
  </tbody>
</table>

<ul class="list-unstyled mb-0 small grid gap-1">
  <li><span class="inline-block bg-success rounded-full align-middle me-1" style="width:8px;height:8px"></span><span class="align-middle">API operational</span></li>
  <li><span class="inline-block bg-warning rounded-full align-middle me-1" style="width:8px;height:8px"></span><span class="align-middle">Dashboard degraded</span></li>
  <li><span class="inline-block bg-danger rounded-full align-middle me-1" style="width:8px;height:8px"></span><span class="align-middle">Webhooks down</span></li>
</ul>

<p class="mb-0 small">Press <kbd class="align-text-top">Ctrl</kbd> + <kbd class="align-text-top">K</kbd> to search Pixel Nest.</p>

<p class="mb-0"><span class="text-4xl font-bold align-baseline">243</span> <span class="text-lg align-baseline">orders</span> <span class="small text-success-emphasis align-baseline">+30 today</span></p>

<div>
  <img src="../assets/img/product-7.svg" alt="Running cap" width="64" height="64" class="rounded-md align-top me-2 object-cover"><span class="inline-block align-top small" style="max-width:14rem"><strong>Running cap</strong><br>Friendly people answer your questions quickly, by phone, chat or email.</span>
</div>

<p class="mb-0">30 items selected <button type="button" class="btn btn-sm btn-outline-danger align-middle ms-2">Clear</button></p>

<p class="mb-0">Our team has done this many times, so you never have to guess.<a href="#" class="small align-text-top no-underline">[1]</a></p>

<p class="mb-0"><span class="text-warning-emphasis align-middle"><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-half" aria-hidden="true"></i></span> <span class="font-semibold align-middle">4.8</span> <span class="small text-muted align-middle">(707 reviews)</span></p>

<table class="table table-sm small mb-0">
  <thead>
    <tr>
      <th scope="col" class="align-bottom">Name</th>
      <th scope="col" class="align-bottom">Monthly<br>active<br>users</th>
      <th scope="col" class="align-bottom">Plan</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Pixel Nest</td>
      <td>80.4k</td>
      <td>Starter</td>
    </tr>
  </tbody>
</table>

<p class="mb-0"><img src="../assets/img/logo-10.svg" alt="" width="36" height="12" class="align-middle rounded-sm border object-cover"> <span class="align-middle">South Africa</span></p>

<div class="form-check form-switch inline-block align-middle mb-0">
  <input class="form-check-input" type="checkbox" role="switch" id="ut-dark-1262">
  <label class="form-check-label" for="ut-dark-1262">Dark mode</label>
</div>
<span class="badge text-bg-secondary align-middle ms-2">Beta</span>