Cards
Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.
RoyalAds Cards
Auto dealership grid card
<div class="card no-shadow w-100 mb-6">
<div class="position-relative overflow-hidden rounded">
<a class="card-image d-inline-block" href="#">
<img class="card-img-top rounded" src="../../assets/images/listings/cars/audi.jpg" alt="Card image">
</a>
<span class="position-absolute btn-call" data-toggle="tooltip" data-placement="top" title="+1 234 567 8901">
<a href="tel:1234567890" class="btn btn-sm btn-circle btn-shadow overflow-hidden btn-dark">
<i class="fas fa-phone"></i>
</a>
</span>
<span class="position-absolute btn-contact" data-toggle="tooltip" data-placement="top" title="[email protected]">
<a class="btn btn-sm btn-circle btn-shadow overflow-hidden btn-dark" data-toggle="modal" data-target="#contactModal">
<i class="far fa-envelope"></i>
</a>
</span>
<span class="position-absolute btn-favorite" data-toggle="tooltip" data-placement="top" title="Add to favorites">
<a class="btn btn-sm btn-circle btn-shadow overflow-hidden btn-dark">
<i class="far fa-star"></i>
</a>
</span>
</div>
<div class="card-body p-0 pt-4">
<span><a class="text-dark" href="#">Sport Car</a></span>
<h5 class="card-title font-weight-bold mb-0"><a href="#"><span class="text-gold">2015</span> Audi R8</a></h5>
<span><span class="font-weight-bold">$23,000</span> • Automatic • 41,000 Mi</span>
</div>
</div>
Auto marketplace grid card
<div class="card no-shadow w-100 mb-6">
<div class="position-relative overflow-hidden rounded">
<a class="card-image d-inline-block" href="#">
<img class="card-img-top rounded" src="../../assets/images/listings/cars/mini.jpg" alt="Card image">
</a>
<a data-fancybox="gallery6" class="position-absolute btn btn-light btn-xs bottom-0 right-0 mr-5 mb-5 z-index-999 overflow-hidden" href="#" data-src="../../assets/images/listings/cars/mini.jpg" data-caption="2018 Mini">
<i class="far fa-images"></i>
</a>
<img data-fancybox="gallery6" class="d-none" src="../../assets/images/listings/cars/mini/mini-1.jpg" alt="" data-src="../../assets/images/listings/cars/mini/mini-1.jpg" data-caption="2018 Mini">
<img data-fancybox="gallery6" class="d-none" src="../../assets/images/listings/cars/mini/mini-2.png" alt="" data-src="../../assets/images/listings/cars/mini/mini-2.png" data-caption="2018 Mini">
<img data-fancybox="gallery6" class="d-none" src="../../assets/images/listings/cars/mini/mini-3.jpg" alt="" data-src="../../assets/images/listings/cars/mini/mini-3.jpg" data-caption="2018 Mini">
<img data-fancybox="gallery6" class="d-none" src="../../assets/images/listings/cars/mini/mini-4.jpg" alt="" data-src="../../assets/images/listings/cars/mini/mini-4.jpg" data-caption="2018 Mini">
</div>
<div class="card-body p-0 pt-4">
<h5 class="card-title font-weight-bold mb-0"><a href="#"><span class="text-gold">2018</span> Mini</a></h5>
<span><span class="font-weight-bold">$12,400</span> • Manual • 34,000 Mi</span>
<div class="align-items-center justify-content-between d-flex mt-3">
<a class="d-inline-block align-items-center royalads-link" href="#">
<div class="media align-items-center">
<div class="mr-3">
<div class="avatar mr-auto ml-auto">
<span class="avatar-title rounded-circle badge-success-soft font-weight-bold">PD</span>
</div>
</div>
<div class="media-body">
<span class="d-block">Pro Drive</span>
</div>
</div>
</a>
<a data-toggle="tooltip" data-placement="top" data-original-title="Add to Favorites" class="h5 mb-0 royalads-link" href="#">
<i class="far fa-star"></i>
</a>
</div>
</div>
</div>
Auto rent a car grid card
<div class="card no-shadow w-100 mb-6">
<div class="position-relative overflow-hidden rounded">
<a class="card-image d-inline-block" href="#">
<img class="card-img-top rounded" src="../../assets/images/listings/cars/lamborghini.jpg" alt="Card image">
</a>
<span class="position-absolute btn-call" data-toggle="tooltip" data-placement="top" title="+1 234 567 8901">
<a href="tel:1234567890" class="btn btn-sm btn-circle btn-shadow overflow-hidden btn-dark">
<i class="fas fa-phone"></i>
</a>
</span>
<span class="position-absolute btn-contact" data-toggle="tooltip" data-placement="top" title="[email protected]">
<a class="btn btn-sm btn-circle btn-shadow overflow-hidden btn-dark" data-toggle="modal" data-target="#contactModal">
<i class="far fa-envelope"></i>
</a>
</span>
<span class="position-absolute btn-favorite" data-toggle="tooltip" data-placement="top" title="Add to favorites">
<a class="btn btn-sm btn-circle btn-shadow overflow-hidden btn-dark">
<i class="far fa-star"></i>
</a>
</span>
</div>
<div class="card-body p-0 pt-4">
<span><a class="text-dark" href="#">Sport Car</a></span>
<h5 class="card-title font-weight-bold mb-0"><a href="#"><span class="text-gold">2018</span> Lamborghini for Rent</a></h5>
<span class="font-weight-bold text-muted">Starting at <span class="text-dark">$1200</span>/day</span>
</div>
</div>
Real estate grid card
$2,300 Per Month
Beverly Hills, CA
272 S Rexford Dr, Beverly Hills, CA
- 2
- 3
- 1
- 1,360 sqft
<div class="card no-shadow w-100 mb-6 bordered rounded">
<div class="position-relative overflow-hidden">
<a class="card-image d-inline-block w-100" href="property-page.html">
<img class="card-img-top" src="../../assets/images/listings/real-estate/countryside.jpg" alt="Card image">
</a>
<span class="position-absolute bg-danger text-white rounded px-4 py-2 bottom-0 ml-6 mb-6 z-index-999 left-0">
<span class="font-weight-bold">$2,300</span> Per Month
</span>
</div>
<div class="card-body p-0">
<div class="mb-3 px-6 pt-5">
<div class="d-block text-muted mb-3"><span class="fas fa-map-marker-alt mr-1 fs-80 text-gold"></span> Beverly Hills, CA</div>
<a class="h5 royalads-link" href="property-page.html">
272 S Rexford Dr, Beverly Hills, CA
</a>
</div>
<ul class="list-inline font-size-1 mb-3 px-6 py-3">
<li class="list-inline-item mr-4" title="2 bedrooms">
<span class="fas fa-bed text-muted mr-2"></span>
2
</li>
<li class="list-inline-item mr-4" title="2 bathrooms">
<span class="fas fa-bath text-muted mr-2"></span>
3
</li>
<li class="list-inline-item mr-4" title="1 living room">
<span class="fas fa-couch text-muted mr-2"></span>
1
</li>
<li class="list-inline-item mr-4" title="square feet">
<span class="fas fa-ruler-combined text-muted mr-2"></span>
1,360 sqft
</li>
</ul>
<div class="bg-light py-4 px-6 align-items-center justify-content-between d-flex">
<a class="d-inline-block align-items-center royalads-link" href="#">
<div class="media d-flex align-items-center">
<div class="mr-3">
<img class="rounded-circle avatar avatar-lg" src="../../assets/images/users/user-2.jpg" alt="Image Description" title="Image Title">
</div>
<div class="media-body">
<small class="d-block text-muted">Listed four days ago</small>
<span class="d-block">Michael Dow</span>
</div>
</div>
</a>
<a class="h3 mb-0 royalads-link" href="#">
<i class="fas fa-star"></i>
</a>
</div>
</div>
</div>