Web Designer Wall

Snippets Email

Bootstrap 5 Customer Receipt Card

A booking receipt card pairing a room photo with guest details, check-in and check-out dates, a fee breakdown and a highlighted total.

Bootstrap 5 No jQuery Feb 2020 2.2K views 

<section class="wdw-stage">
  <div class="container" style="max-width:900px">
    <article class="wdw-card overflow-hidden" aria-labelledby="rcTitle">
      <div class="row g-0">
        <div class="col-md-5 rc-photo position-relative">
          <img src="https://images.unsplash.com/photo-1505577058444-a3dab90d4253?w=700&q=80" alt="Bright double room with tiled floor and a lantern" class="rc-img">
          <div class="rc-scrim position-absolute bottom-0 start-0 end-0 p-4 text-white">
            <p class="small opacity-75 mb-1">Double room</p>
            <p class="h5 fw-bold mb-0">Riad Al Jazira, Marrakech</p>
          </div>
        </div>
        <div class="col-md-7 p-4 p-md-5">
          <div class="d-flex align-items-start justify-content-between gap-3 mb-4">
            <div>
              <span class="badge bg-success-subtle text-success-emphasis rounded-pill mb-2 px-3 py-2"><span aria-hidden="true">✓</span> Confirmed</span>
              <h1 class="h3 wdw-heading mb-1" id="rcTitle">Customer receipt</h1>
              <p class="wdw-muted small mb-0">Your reservation is now confirmed. <span class="text-nowrap">Booking #RZ-48213</span></p>
            </div>
            <span class="wdw-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M4 3h16v18l-3-2-3 2-2-2-2 2-3-2-3 2zM8 8h8M8 12h8"/></svg>
            </span>
          </div>

          <dl class="rc-list mb-0">
            <div><dt>Guest</dt><dd>Jamie Doe</dd></div>
            <div><dt>Nights</dt><dd>6</dd></div>
            <div><dt>Address</dt><dd>45 Park Avenue, Apt. 303</dd></div>
          </dl>

          <div class="rc-dates d-flex align-items-center gap-3 my-4 py-3">
            <div>
              <div class="wdw-eyebrow">Check-in</div>
              <div class="fw-bold">29 Nov 2026</div>
            </div>
            <div class="rc-arrow flex-grow-1" aria-hidden="true"></div>
            <div class="text-end">
              <div class="wdw-eyebrow">Check-out</div>
              <div class="fw-bold">5 Dec 2026</div>
            </div>
          </div>

          <dl class="rc-list mb-3">
            <div><dt>Price per night</dt><dd>$144.99</dd></div>
            <div><dt>Cleaning fee</dt><dd>$19.99</dd></div>
          </dl>
          <div class="d-flex justify-content-between align-items-baseline pt-3 rc-total">
            <span class="fw-bold fs-5 text-body-emphasis">Total</span>
            <span class="fw-bolder fs-3 text-success-emphasis">$889.93</span>
          </div>
        </div>
      </div>
    </article>
  </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 email snippets