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>Chloe Okafor</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>Isla Nguyen</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">Every detail is handled by people who care about getting it right.</span></p>

<p class="mb-0">Written by <img src="../assets/img/avatar-10.svg" alt="" width="22" height="22" class="rounded-full align-text-bottom"> <strong>Arjun Brennan</strong> on Jul 6, 2026.</p>

<h3 class="h4 mb-0">Five things we learned this year <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">28</span><span class="text-lg align-baseline">.09</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 How to choose the right trip</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>Ocean view suite<br><span class="text-muted">Beach</span><br><span class="text-muted">Qty 2</span></td>
      <td class="align-bottom text-end font-semibold">$295.98</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 Orbiora.</p>

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

<div>
  <img src="../assets/img/product-7.svg" alt="Food tour" 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>Food tour</strong><br>Clear prices, honest advice and no surprises along the way.</span>
</div>

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

<p class="mb-0">We measure success by how many travellers come back and tell their friends.<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">(747 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>Orbiora</td>
      <td>88.4k</td>
      <td>Pro</td>
    </tr>
  </tbody>
</table>

<p class="mb-0"><img src="../assets/img/logo-4.svg" alt="" width="36" height="12" class="align-middle rounded-sm border object-cover"> <span class="align-middle">Norway</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>