Web Designer Wall

Snippets Email

Bootstrap 5 Customer Receipt Card (Booking Confirmation)

A booking confirmation receipt with a property photo, guest details, a check-in and check-out summary, an itemised price breakdown and a highlighted total.

Bootstrap 5 No jQuery Mar 2020 4.1K views 

<section class="wdw-stage">
  <div class="container" style="max-width:860px">
    <article class="wdw-card overflow-hidden rc" aria-labelledby="rc-title">
      <div class="row g-0">
        <div class="col-md-5 rc-photo position-relative">
          <img src="https://images.unsplash.com/photo-1505691938895-1758d7feb511?auto=format&fit=crop&w=720&h=900&q=70" alt="Bright apartment living room with a framed painting and teal cushions" class="rc-img">
          <div class="rc-cap text-white p-4">
            <span class="badge rounded-pill text-bg-light mb-2">Confirmed</span>
            <p class="fw-bold mb-0">Casa Azul, Marrakech</p>
            <p class="small mb-0 opacity-75">45 Park Avenue, Apt. 303</p>
          </div>
        </div>
        <div class="col-md-7 p-4 p-lg-5">
          <div class="d-flex align-items-start justify-content-between gap-3 mb-4">
            <div>
              <h1 class="h3 fw-bold mb-1" id="rc-title">Customer receipt</h1>
              <p class="small wdw-muted mb-0">Your reservation is now confirmed</p>
            </div>
            <span class="wdw-icon" aria-hidden="true"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>
          </div>

          <dl class="row small mb-0">
            <dt class="col-5 wdw-muted fw-normal">Guest</dt><dd class="col-7 text-end fw-semibold mb-2">Jamie Doe</dd>
            <dt class="col-5 wdw-muted fw-normal">Nights</dt><dd class="col-7 text-end fw-semibold mb-2">6</dd>
            <dt class="col-5 wdw-muted fw-normal">Booking ref</dt><dd class="col-7 text-end fw-semibold mb-0">#RC-48213</dd>
          </dl>

          <div class="d-flex align-items-center justify-content-between gap-3 rounded-4 bg-body-tertiary p-3 my-4">
            <div>
              <p class="rc-k mb-0">Check-in</p>
              <p class="fw-bold mb-0">29 Nov 2026</p>
            </div>
            <svg class="text-primary flex-shrink-0" width="28" height="14" viewBox="0 0 28 14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 7h25M20 1l6 6-6 6"/></svg>
            <div class="text-end">
              <p class="rc-k mb-0">Check-out</p>
              <p class="fw-bold mb-0">5 Dec 2026</p>
            </div>
          </div>

          <dl class="row small mb-0">
            <dt class="col-7 wdw-muted fw-normal">Price per night</dt><dd class="col-5 text-end fw-semibold mb-2">$144.99</dd>
            <dt class="col-7 wdw-muted fw-normal">6 nights</dt><dd class="col-5 text-end fw-semibold mb-2">$869.94</dd>
            <dt class="col-7 wdw-muted fw-normal">Cleaning fee</dt><dd class="col-5 text-end fw-semibold mb-0">$19.99</dd>
          </dl>
          <hr class="my-3">
          <div class="d-flex align-items-center justify-content-between">
            <span class="fw-bold fs-5">Total</span>
            <span class="fw-bold fs-4 text-success-emphasis">$889.93</span>
          </div>
          <button type="button" class="btn btn-outline-primary rounded-pill w-100 mt-4" id="rc-print">Print receipt</button>
        </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