Web Designer Wall

Snippets Badge

Bootstrap 5 Buttons and Badges with text-box-trim

Bootstrap 5 buttons, badges, a callout and a card heading optically centred and aligned with CSS text-box-trim. A switch compares the default spacing with the trimmed version.

Bootstrap 5 No jQuery Oct 2026 

<section class="wdw-stage">
  <div class="container tbx" id="tbx" data-trim="on" style="max-width:880px">
    <div class="d-flex flex-wrap justify-content-between align-items-end gap-3 mb-4">
      <div>
        <span class="wdw-eyebrow">Typography</span>
        <h1 class="wdw-heading h2 mt-1 mb-0">Optically centred UI text</h1>
      </div>
      <div class="form-check form-switch d-flex align-items-center gap-2 mb-0 ps-0">
        <input class="form-check-input ms-0 mt-0" type="checkbox" role="switch" id="tbxSwitch" checked>
        <label class="form-check-label fw-semibold small" for="tbxSwitch">text-box: trim</label>
      </div>
    </div>

    <div class="wdw-card p-4 p-md-5">
      <h2 class="wdw-eyebrow mb-3">Buttons</h2>
      <div class="d-flex flex-wrap align-items-center gap-3 mb-4">
        <button type="button" class="btn btn-primary btn-sm rounded-pill px-3"><span class="tb">Small</span></button>
        <button type="button" class="btn btn-primary rounded-pill px-4"><span class="tb">Get started</span></button>
        <button type="button" class="btn btn-primary btn-lg rounded-pill px-4"><span class="tb">Start free trial</span></button>
        <button type="button" class="btn btn-outline-primary rounded-pill px-4">
          <svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 3v10m0 0-4-4m4 4 4-4M4 17h12"/></svg>
          <span class="tb">Download</span>
        </button>
        <button type="button" class="btn btn-outline-primary rounded-pill px-4">
          <span class="tb">Inbox</span>
          <span class="badge rounded-pill text-bg-primary">12</span>
        </button>
      </div>

      <h2 class="wdw-eyebrow mb-3">Badges and pills</h2>
      <div class="d-flex flex-wrap align-items-center gap-2 mb-4">
        <span class="badge rounded-pill text-bg-primary">New</span>
        <span class="badge rounded-pill bg-primary-subtle text-primary-emphasis">Beta</span>
        <span class="badge rounded-pill bg-success-subtle text-success-emphasis">Paid</span>
        <span class="badge rounded-pill bg-warning-subtle text-warning-emphasis">Pending</span>
        <span class="badge rounded-pill bg-danger-subtle text-danger-emphasis">Overdue</span>
        <span class="badge rounded-pill tb-inverse fs-6 px-3">Pro plan</span>
      </div>

      <h2 class="wdw-eyebrow mb-3">Callout</h2>
      <div class="alert alert-primary d-flex align-items-start gap-3 border-0 rounded-4 p-3 p-md-4 mb-4" role="alert">
        <span class="wdw-icon" style="width:2.5rem;height:2.5rem;background:rgba(var(--bs-primary-rgb),.16)">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg>
        </span>
        <div class="tb-block">
          <p class="fw-bold mb-1 text-body-emphasis">Trimming is progressive enhancement</p>
          <p class="mb-0 small">Browsers without text-box-trim keep the default spacing, so nothing breaks.</p>
        </div>
      </div>

      <h2 class="wdw-eyebrow mb-3">Card</h2>
      <article class="tb-media d-flex gap-3 gap-md-4 p-3 rounded-4 border bg-body-tertiary">
        <div class="tb-img rounded-3 overflow-hidden">
          <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=500&q=70" alt="A laptop showing code on a tidy desk">
        </div>
        <div class="tb-block media-text">
          <p class="wdw-eyebrow mb-2">Tutorial</p>
          <h3 class="h5 fw-bold text-body-emphasis mb-2">Align text to the edge of an image</h3>
          <p class="mb-0 text-body-secondary small">The heading starts on the photo's top edge and the last line ends on its bottom edge.</p>
        </div>
      </article>
    </div>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Related snippets

More badge snippets