Card with Modal
Card and modal combo.
Package Card with Modal
<div class="card dyn-crd-psv">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w,
../../../../assets/img//fpo/fpo-8-5@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
alt="Image description"
class="card-img-top img-ar8-5"
>
</figure>
<div class="card-body">
<h3 class="card-title">Dinner for Two</h3>
<p class="card-text">Get a three course dinner for two at the Sizzle Tavern with your overnight stay.</p>
<div class="card-actions">
<a href="#" class="btn btn-primary">Book Now</a>
<button type="button" data-bs-toggle="modal" data-bs-target="#specialExample1" class="btn btn-outline-primary">More Info</button>
</div>
</div>
</div>
<div class="modal fade modal-special" id="specialExample1" tabindex="-1" aria-labelledby="specialExample1Label" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="specialExample1Label"><span class="visually-hidden">Specials</span></h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- BEGIN: Modal Content -->
<div class="row gy-3">
<div class="col-lg-5 modal-img-col">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w,
../../../../assets/img//fpo/fpo-8-5@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
alt="Image description"
class="card-img-top img-ar8-5"
>
</figure>
</div>
<div class="col-lg-7 modal-content-col">
<h3>Dinner for Two</h3>
<p class="lead">Get a three course dinner for two at the Sizzle Tavern with your overnight stay.</p>
<p>This dining package is the perfect option for romantic encounters or anyone who enjoys a great meal and a restful night out. When you reserve a room with this package, you'll also receive a three course dinner for two in 30Boltwood.</p><p><em>Available between 04/09/2024 and 05/09/2025. Rate excludes taxes, gratuity and alcohol purchase.</em></p>
<div class="card-actions">
<a href="#" class="btn btn-primary">Book Now</a>
</div>
</div>
</div>
<!-- END: Modal Content -->
</div>
</div>
</div>
</div>
Package Card (Horizontal) with Modal
<div class="card crd-hrz dyn-crd-psh">
<div class="row flex-fill g-0">
<div class="col-cdhz-1">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w,
../../../../assets/img//fpo/fpo-8-5@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
alt="Image description"
class="img-fluid img-ar8-5 d-md-none"
>
</figure>
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-4-5@xs.jpg 480w,
../../../../assets/img//fpo/fpo-4-5@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//fpo/fpo-4-5@md.jpg"
alt="Image description"
class="img-fluid img-ar4-5 d-none d-md-block"
>
</figure>
</div>
<div class="col-cdhz-2">
<div class="card-body">
<h3 class="card-title">Dinner for Two</h3>
<p class="card-text">Get a three course dinner for two at the Sizzle Tavern with your overnight stay.</p>
<div class="card-actions">
<a href="#" class="btn btn-primary">Book Now</a>
<button type="button" data-bs-toggle="modal" data-bs-target="#specialExample1" class="btn btn-outline-primary">More Info</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade modal-special" id="specialExample1" tabindex="-1" aria-labelledby="specialExample1Label" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="specialExample1Label"><span class="visually-hidden">Specials</span></h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- BEGIN: Modal Content -->
<div class="row gy-3">
<div class="col-lg-5 modal-img-col">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w,
../../../../assets/img//fpo/fpo-8-5@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
alt="Image description"
class="img-fluid img-ar8-5"
>
</figure>
</div>
<div class="col-lg-7 modal-content-col">
<h3>Dinner for Two</h3>
<p class="lead">Get a three course dinner for two at the Sizzle Tavern with your overnight stay.</p>
<p>This dining package is the perfect option for romantic encounters or anyone who enjoys a great meal and a restful night out. When you reserve a room with this package, you'll also receive a three course dinner for two in 30Boltwood.</p><p><em>Available between 04/09/2024 and 05/09/2025. Rate excludes taxes, gratuity and alcohol purchase.</em></p>
<div class="card-actions">
<a href="#" class="btn btn-primary">Book Now</a>
</div>
</div>
</div>
<!-- END: Modal Content -->
</div>
</div>
</div>
</div>
Room Card with Modal
<div class="card dyn-crd-rtv">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w,
../../../../assets/img//fpo/fpo-8-5@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
alt="Image description"
class="card-img-top img-ar8-5"
>
</figure>
<div class="card-body">
<h3 class="card-title">Standard King Room</h3>
<p class="card-text">Our standard king room contains a king sized bed, media wall with a High Definition (HD) Flat Panel Television, and a tiled bathroom that has a standing glass shower only.</p>
<div class="rm-dtl">
<div class="rm-dtl-itm itm-beds">
<div class="heading">Beds 1</div>
<div class="item-value">King</div>
</div>
<div class="rm-dtl-itm itm-guests">
<div class="heading">Guests 2</div>
</div>
<div class="rm-dtl-itm itm-anen">
<span class="visually-hidden">Amenities</span>
<ul>
<li><span class="fa-solid fa-wheelchair" aria-hidden="true"></span><span class="visually-hidden">Wheelchair Accessible</span>
</li>
<li><span class="fa-solid fa-wifi" aria-hidden="true"></span><span class="visually-hidden">Wifi</span>
</li>
</ul>
</div>
</div>
<div class="card-actions">
<a href="#" class="btn btn-primary">Book Now</a>
<button type="button" data-bs-toggle="modal" data-bs-target="#specialExample1" class="btn btn-outline-primary">More Info</button>
</div>
</div>
</div>
<div class="modal fade modal-special" id="specialExample1" tabindex="-1" aria-labelledby="specialExample1Label" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="specialExample1Label"><span class="visually-hidden">Specials</span></h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- BEGIN: Modal Content -->
<div class="row gy-3">
<div class="col-lg-5 modal-img-col">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w,
../../../../assets/img//fpo/fpo-8-5@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
alt="Image description"
class="card-img-top img-ar8-5"
>
</figure>
</div>
<div class="col-lg-7 modal-content-col">
<h3>Standard King Room</h3>
<p class="lead">Our standard king room contains a king sized bed, media wall with a High Definition (HD) Flat Panel Television, and a tiled bathroom that has a standing glass shower only.</p>
<h4>Amenities</h4><ul class="row no-gutters"><li class="col-12 col-md-12 col-xl-6 pt-0 pb-0">King bed</li><li class="col-12 col-md-12 col-xl-6 pt-0 pb-0">Large desk with lamp and chairs</li><li class="col-12 col-md-12 col-xl-6 pt-0 pb-0">Ironing board and iron</li><li class="col-12 col-md-12 col-xl-6 pt-0 pb-0">Telephone and voicemail</li><li class="col-12 col-md-12 col-xl-6 pt-0 pb-0">Wake-up calls</li><li class="col-12 col-md-12 col-xl-6 pt-0 pb-0">Coffee/Tea maker</li><li class="col-12 col-md-12 col-xl-6 pt-0 pb-0">Hairdryer</li><li class="col-12 col-md-12 col-xl-6 pt-0 pb-0">Alarm clock</li><li class="col-12 col-md-12 col-xl-6 pt-0 pb-0">Pets allowed - $75.00 charge</li><li class="col-12 col-md-12 col-xl-6 pt-0 pb-0">Air conditioning (individually controlled)</li></ul>
<div class="card-actions">
<a href="#" class="btn btn-primary">Book Now</a>
</div>
</div>
</div>
<!-- END: Modal Content -->
</div>
</div>
</div>
</div>
Room Card (Horizontal) with Modal
<div class="card crd-hrz dyn-crd-rth">
<div class="row flex-fill g-0">
<div class="col-cdhz-1">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w,
../../../../assets/img//fpo/fpo-8-5@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
alt="Image description"
class="img-fluid img-ar8-5 d-md-none"
>
</figure>
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-4-5@xs.jpg 480w,
../../../../assets/img//fpo/fpo-4-5@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//fpo/fpo-4-5@md.jpg"
alt="Image description"
class="img-fluid img-ar4-5 d-none d-md-block"
>
</figure>
</div>
<div class="col-cdhz-2">
<div class="card-body">
<h3 class="card-title">Standard King Room</h3>
<p class="card-text">Our standard king room contains a king sized bed, media wall with a High Definition (HD) Flat Panel Television, and a tiled bathroom that has a standing glass shower only.</p>
<div class="rm-dtl">
<div class="rm-dtl-itm itm-beds">
<div class="heading">Beds 1</div>
<div class="item-value">King</div>
</div>
<div class="rm-dtl-itm itm-guests">
<div class="heading">Guests 2</div>
</div>
<div class="rm-dtl-itm itm-anen">
<span class="visually-hidden">Amenities</span>
<ul>
<li><span class="fa-solid fa-wheelchair" aria-hidden="true"></span><span class="visually-hidden">Wheelchair Accessible</span>
</li>
<li><span class="fa-solid fa-wifi" aria-hidden="true"></span><span class="visually-hidden">Wifi</span>
</li>
</ul>
</div>
</div>
<div class="card-actions">
<a href="#" class="btn btn-primary">Book Now</a>
<button type="button" data-bs-toggle="modal" data-bs-target="#specialExample1" class="btn btn-outline-primary">More Info</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade modal-special" id="specialExample1" tabindex="-1" aria-labelledby="specialExample1Label" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="specialExample1Label"><span class="visually-hidden">Specials</span></h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- BEGIN: Modal Content -->
<div class="row gy-3">
<div class="col-lg-5 modal-img-col">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-4-5@xs.jpg 480w,
../../../../assets/img//fpo/fpo-4-5@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//fpo/fpo-4-5@md.jpg"
alt="Image description"
class="img-fluid img-ar4-5"
>
</figure>
</div>
<div class="col-lg-7 modal-content-col">
<h3>Standard King Room</h3>
<p class="lead">Our standard king room contains a king sized bed, media wall with a High Definition (HD) Flat Panel Television, and a tiled bathroom that has a standing glass shower only.</p>
<h4>Amenities</h4><ul class="row no-gutters"><li class="col-12 col-md-12 col-xl-6 pt-0 pb-0">King bed</li><li class="col-12 col-md-12 col-xl-6 pt-0 pb-0">Large desk with lamp and chairs</li><li class="col-12 col-md-12 col-xl-6 pt-0 pb-0">Ironing board and iron</li><li class="col-12 col-md-12 col-xl-6 pt-0 pb-0">Telephone and voicemail</li><li class="col-12 col-md-12 col-xl-6 pt-0 pb-0">Wake-up calls</li><li class="col-12 col-md-12 col-xl-6 pt-0 pb-0">Coffee/Tea maker</li><li class="col-12 col-md-12 col-xl-6 pt-0 pb-0">Hairdryer</li><li class="col-12 col-md-12 col-xl-6 pt-0 pb-0">Alarm clock</li><li class="col-12 col-md-12 col-xl-6 pt-0 pb-0">Pets allowed - $75.00 charge</li><li class="col-12 col-md-12 col-xl-6 pt-0 pb-0">Air conditioning (individually controlled)</li></ul>
<div class="card-actions">
<a href="#" class="btn btn-primary">Book Now</a>
</div>
</div>
</div>
<!-- END: Modal Content -->
</div>
</div>
</div>
</div>