Web Designer Wall

Snippets Email

Bootstrap 5 Restaurant Email Template

A single-column promotional email layout for a restaurant with a photo hero, welcome copy, a three-dish menu row, an offer banner and a footer.

Bootstrap 5 No jQuery Apr 2019 3.7K views 

<section class="wdw-stage">
  <div class="container" style="max-width:640px">
    <!-- Web preview of an email layout. Real email clients ignore flex/grid and background images, so rebuild with tables before sending. -->
    <p class="text-center small wdw-muted mb-2">Can't read this email? <a href="#" class="link-secondary">View in browser</a></p>
    <div class="wdw-card overflow-hidden em-mail">
      <div class="text-center py-3 border-bottom em-brand">
        <span class="fw-bold wdw-heading fs-5" style="letter-spacing:.14em">RESTOBAR</span>
      </div>
      <div class="em-hero position-relative text-white text-center d-flex flex-column justify-content-end align-items-center px-4 pt-4 pb-5">
        <span class="badge rounded-pill em-pill mb-2">New seasonal menu</span>
        <h2 class="fw-bold mb-2 em-hero-title">We serve healthy & delicious food</h2>
        <p class="mb-3 em-sub" style="max-width:30rem">Fresh, local ingredients cooked slowly and served warm. Book a table this week and taste autumn.</p>
        <a href="#" class="btn btn-primary rounded-pill px-4 mb-4">Reserve your table</a>
      </div>
      <div class="px-3 px-md-4 em-dishes">
        <div class="row g-2 g-md-3">
          <div class="col-4"><div class="text-center wdw-card-sm p-2 h-100"><img class="em-dish rounded-3 mb-2" src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?auto=format&fit=crop&w=400&q=75" alt="Fresh salad bowl" loading="lazy"><h4 class="h6 fw-bold mb-1">Garden salad</h4><p class="small wdw-muted mb-0 d-none d-sm-block">Seasonal greens, citrus dressing</p></div></div>
          <div class="col-4"><div class="text-center wdw-card-sm p-2 h-100"><img class="em-dish rounded-3 mb-2" src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?auto=format&fit=crop&w=400&q=75" alt="Wood-fired pizza" loading="lazy"><h4 class="h6 fw-bold mb-1">Wood-fired pizza</h4><p class="small wdw-muted mb-0 d-none d-sm-block">Slow-rise dough, buffalo mozzarella</p></div></div>
          <div class="col-4"><div class="text-center wdw-card-sm p-2 h-100"><img class="em-dish rounded-3 mb-2" src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=400&q=75" alt="Plated main course" loading="lazy"><h4 class="h6 fw-bold mb-1">Chef's special</h4><p class="small wdw-muted mb-0 d-none d-sm-block">Changes with the market weekly</p></div></div>
        </div>
      </div>
      <div class="px-4 px-md-5 py-4 text-center">
        <h3 class="wdw-heading h5 mb-2">Welcome to RestoBar</h3>
        <p class="wdw-muted small mb-0 mx-auto" style="max-width:30rem">A small riverside kitchen where every plate is made to order. Come hungry, bring friends, and leave a little happier than you arrived.</p>
      </div>
      <div class="em-cta text-center px-4 py-4 wdw-aurora">
        <h3 class="fw-bold h5 mb-1">Dinner for two, on us</h3>
        <p class="mb-3 em-sub">Order online before Sunday and get a free dessert.</p>
        <a href="#" class="btn btn-light rounded-pill px-4">Order online</a>
      </div>
      <div class="text-center small wdw-muted px-4 py-3">
        <div class="d-flex justify-content-center gap-3 mb-2">
          <a href="#" class="link-secondary">Order online</a><a href="#" class="link-secondary">Menu</a><a href="#" class="link-secondary">Instagram</a>
        </div>
        <p class="mb-1">RestoBar, 12 River Street. Open daily 11:00 to 23:00.</p>
        <p class="mb-0">You received this email because you subscribed. <a href="#" class="link-secondary">Unsubscribe</a></p>
      </div>
    </div>
  </div>
</section>

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

Free to use in personal and commercial projects under the MIT license.

Related snippets

More email snippets