Web Designer Wall

Snippets Booking

Bootstrap 5 Hotel Booking Modal with Price Estimate

A hotel promo card whose Book hotel button opens a booking modal with dates, guests, room type and a live price estimate.

Bootstrap 5 No jQuery Jul 2020 2.4K views 

<section class="wdw-stage">
  <div class="container" style="max-width:980px">
    <div class="wdw-card overflow-hidden">
      <div class="row g-0">
        <div class="col-md-6 hb-photo" role="img" aria-label="Resort hotel with a pool at dusk"></div>
        <div class="col-md-6 p-4 p-md-5 d-flex flex-column justify-content-center">
          <span class="wdw-eyebrow">Seaside Resort & Spa</span>
          <h1 class="h2 wdw-heading mt-1 mb-2">Your stay by the water</h1>
          <p class="wdw-muted mb-3">Ocean-view rooms, a rooftop pool and breakfast included.</p>
          <div class="d-flex align-items-baseline gap-2 mb-4"><span class="fs-2 fw-bold text-body-emphasis">$189</span><span class="wdw-muted">per night</span></div>
          <div><button type="button" class="btn btn-primary btn-lg rounded-pill px-4" data-bs-toggle="modal" data-bs-target="#hbModal">Book hotel</button></div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="hbModal" tabindex="-1" aria-labelledby="hbTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
      <div class="modal-content border-0 shadow-lg" style="border-radius:1.25rem">
        <div class="modal-header border-0 px-4 pt-4 pb-0">
          <div><h2 class="modal-title h4 wdw-heading" id="hbTitle">Book your stay</h2><p class="small wdw-muted mb-0">Free cancellation up to 48 hours before check-in.</p></div>
          <button type="button" class="btn-close align-self-start" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <form id="hbForm" novalidate>
          <div class="modal-body p-4">
            <div class="row g-3">
              <div class="col-6"><div class="form-floating"><input type="date" class="form-control" id="hbIn" required><label for="hbIn">Check-in</label></div></div>
              <div class="col-6"><div class="form-floating"><input type="date" class="form-control" id="hbOut" required><label for="hbOut">Check-out</label></div></div>
              <div class="col-6"><div class="form-floating"><select class="form-select" id="hbGuests"><option>1 guest</option><option selected>2 guests</option><option>3 guests</option><option>4 guests</option></select><label for="hbGuests">Guests</label></div></div>
              <div class="col-6"><div class="form-floating"><select class="form-select" id="hbRoom"><option value="189">Ocean view</option><option value="239">Deluxe suite</option><option value="149">Garden room</option></select><label for="hbRoom">Room</label></div></div>
              <div class="col-12"><div class="form-floating"><input type="email" class="form-control" id="hbEmail" placeholder="Email" required><label for="hbEmail">Email for confirmation</label></div></div>
            </div>
            <div class="hb-total d-flex justify-content-between align-items-center rounded-4 p-3 mt-4">
              <div><div class="small wdw-muted" id="hbNights">2 nights</div><div class="fw-semibold">Estimated total</div></div>
              <div class="fs-4 fw-bold text-body-emphasis" id="hbTotal">$378</div>
            </div>
          </div>
          <div class="modal-footer border-0 px-4 pb-4 pt-0">
            <button type="button" class="btn btn-outline-secondary rounded-pill" data-bs-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-primary rounded-pill px-4">Confirm booking</button>
          </div>
        </form>
      </div>
    </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 booking snippets