Vertical Align

<p class="fs-2 mb-0 bg-body-tertiary rounded-3 p-2">Ag <span class="align-baseline fs-6 bg-primary-subtle px-1">baseline</span> <span class="align-top fs-6 bg-primary-subtle px-1">top</span> <span class="align-middle fs-6 bg-primary-subtle px-1">middle</span> <span class="align-bottom fs-6 bg-primary-subtle px-1">bottom</span> <span class="align-text-top fs-6 bg-success-subtle px-1">text-top</span> <span class="align-text-bottom fs-6 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-circle"></td>
        <td>Aria 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-circle"></td>
        <td>Leo Larsen</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="fs-4 align-middle text-primary"><i class="bi bi-info-circle" aria-hidden="true"></i></span> <span class="align-middle">The new dark mode shows results you can measure on any device.</span></p>

<p class="mb-0">Written by <img src="../assets/img/avatar-4.svg" alt="" width="22" height="22" class="rounded-circle align-text-bottom"> <strong>Zoe Haddad</strong> on Dec 16, 2025.</p>

<h3 class="h4 mb-0">Inside the elegant community <span class="badge text-bg-primary fs-6 align-middle">New</span></h3>

<div class="fw-bold">
  <span class="fs-5 align-top">$</span><span class="display-5">76</span><span class="fs-5 align-baseline">.23</span><span class="small text-body-secondary fw-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 Bright ways to improve your project</label></p>

<div class="bg-body-tertiary rounded-3 p-2">
  <span class="d-inline-block bg-primary-subtle rounded-2 p-2 align-top" style="height:80px">top</span> <span class="d-inline-block bg-primary-subtle rounded-2 p-2 align-middle">middle</span> <span class="d-inline-block bg-primary-subtle rounded-2 p-2 align-bottom">bottom</span> <span class="d-inline-block bg-success-subtle rounded-2 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>Team plan<br><span class="text-body-secondary">Support</span><br><span class="text-body-secondary">Qty 1</span></td>
      <td class="align-bottom text-end fw-semibold">$190.17</td>
    </tr>
  </tbody>
</table>

<ul class="list-unstyled mb-0 small d-grid gap-1">
  <li><span class="d-inline-block bg-success rounded-circle align-middle me-1" style="width:8px;height:8px"></span><span class="align-middle">API operational</span></li>
  <li><span class="d-inline-block bg-warning rounded-circle align-middle me-1" style="width:8px;height:8px"></span><span class="align-middle">Dashboard degraded</span></li>
  <li><span class="d-inline-block bg-danger rounded-circle 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 Brand name 8.</p>

<p class="mb-0"><span class="fs-1 fw-bold align-baseline">994</span> <span class="fs-5 align-baseline">orders</span> <span class="small text-success align-baseline">+18 today</span></p>

<div>
  <img src="../assets/img/product-9.svg" alt="Analytics add-on" width="64" height="64" class="rounded-2 align-top me-2 object-fit-cover"><span class="d-inline-block align-top small" style="max-width:14rem"><strong>Analytics add-on</strong><br>This powerful journey turns results you can measure at a fair price.</span>
</div>

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

<p class="mb-0">A practical goal connects the whole team on the same page for teams of every size.<a href="#" class="small align-text-top text-decoration-none">[1]</a></p>

<p class="mb-0"><span class="text-warning 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="fw-semibold align-middle">4.8</span> <span class="small text-body-secondary align-middle">(619 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>Brand name 8</td>
      <td>65.1k</td>
      <td>Pro</td>
    </tr>
  </tbody>
</table>

<p class="mb-0"><img src="../assets/img/logo-5.svg" alt="" width="36" height="12" class="align-middle rounded-1 border object-fit-cover"> <span class="align-middle">Singapore</span></p>

<div class="form-check form-switch d-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>