Back to all templatesFlight
FlightE commerce
This is a screenshot of the compiled email. To view a live in browser version of the email click the "Live" button.
This is the pre-compiled code. It needs to be compiled via Bootstrap Email to build it for use in emails. You can do so by clicking the "Open in Editor" button, programmatically compile, or use the already compiled version by clicking the "Download Compiled" button.
<body>
<div class="container">
<img class="my-4 w-40" src="https://assets.bootstrapemail.com/logos/light/combined.png" />
<div class="card">
<div class="card-body">
<p class="text-gray-800">MAY 28 - MAY 30</p>
<div class="stack-row stack-ay-baseline gap-4">
<span class="text-4xl fw-800">BOS</span>
<img class="w-6" src="https://assets.bootstrapemail.com/icons/plane.png">
<span class="text-4xl fw-800">SFO</span>
</div>
<p class="text-gray-800">Boston Logan to San Francisco</p>
<hr>
<p class="text-xl">Confirmation <span class="fw-800 text-green-600">#123QWERTY</span></p>
<table>
<tbody>
<tr>
<td class="pr-2">Passenger</td>
<td class="fw-800">John Doe</td>
</tr>
<tr>
<td class="pr-2">Ticket #</td>
<td>1234567890</td>
</tr>
<tr>
<td class="pr-2">Rewards #</td>
<td>1234567890</td>
</tr>
</tbody>
</table>
</div>
</div>
<h4 class="fw-800 mt-6 mb-2">Your Itinerary</h4>
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-lg-2 ay-middle ax-center pb-4 pb-lg-0">
<p>Flight<br class="d-none d-lg-inline" />#1234</p>
</div>
<div class="col-lg-4 ay-middle">
<p class="text-gray-700 text-lg fw-800">DEPARTS</p>
<p class="text-blue-800 text-2xl fw-800">BOS 10:35am</p>
<p class="text-gray-800">Boston Logan</p>
</div>
<div class="col-lg-1 ay-middle pb-4 pb-lg-0">
<img class="w-6 d-none d-lg-block" src="https://assets.bootstrapemail.com/icons/plane.png">
</div>
<div class="col-lg-5 ay-middle ax-center">
<p class="text-gray-700 text-lg fw-800">ARRIVES</p>
<p class="text-blue-800 text-2xl fw-800">SFO 3:35pm</p>
<p class="text-gray-800">San Francisco</p>
</div>
</div>
</div>
</div>
<h4 class="fw-800 mt-6 mb-2">Payment Information</h4>
<div class="card">
<div class="card-body space-y-2">
<p>A charge of <span class="text-green-700 fw-800">$432.23</span> was charged to the card ending in <span class="fw-800">4242</span> on 10/10/2021. For more payment details and a full pricing breakdown you can view <a href="https://bootstrapemail.com">more payment info here</a>.</p>
</div>
</div>
<h4 class="fw-800 mt-6 mb-2">Prepare for Takeoff</h4>
<div class="card">
<div class="card-body space-y-2">
<p class="text-blue-800 text-2xl fw-800">Download the App</p>
<p>Download the app to check in early, access exclusive on demand content, and pre-check your bags.</p>
<a class="btn btn-blue-800" href="https://app.bootstrapemail.com/templates">Download App</a>
</div>
</div>
</div>
</body>