Auto grid card

Combination of the default Bootstrap card component with an image fancybox gallery at the top and vehicle info in the body.

2018 Mini Cooper Coupe

• New
• Automatic

$22,500

<div class="row">
    <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">

        <div class="card card-shadow no-border mb-30 lift">
            <div class="media position-relative">
                <a class="w-100" href="single-car.html">
                    <img class="card-img-top" src="assets/images/cars/mini/mini-1-442x310.jpg" alt="Mini">
                    <div class="position-absolute w-100 pt-3 pb-3 px-3 bottom-0">
                        <div class="row justify-content-between align-items-center">
                            <div class="col-12 text-right">
                                <a data-fancybox="gallery8" href="javascript:;" class="fancybox-gallery btn btn-icon btn-sm btn-dark position-relative" data-src="assets/images/cars/mini/mini-1.jpg" data-thumb="assets/images/cars/mini/mini-1.jpg" data-caption="Mini #01">
                                    <span class="fas fa-images btn-icon-inner"></span>
                                </a>
                                <img data-fancybox="gallery8" class="d-none" src="assets/images/cars/mini/mini-2.png" alt="Mini" data-src="assets/images/cars/mini/mini-2.png" data-thumb="assets/images/cars/mini/mini-2.png" data-caption="Mini #02">
                                <img data-fancybox="gallery8" class="d-none" src="assets/images/cars/mini/mini-3.png" alt="Mini" data-src="assets/images/cars/mini/mini-3.png" data-thumb="assets/images/cars/mini/mini-3.png" data-caption="Mini #03">
                                <img data-fancybox="gallery8" class="d-none" src="assets/images/cars/mini/mini-4.png" alt="Mini" data-src="assets/images/cars/mini/mini-4.png" data-thumb="assets/images/cars/mini/mini-4.png" data-caption="Mini #04">
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="card-body">
                <h5 class="card-title fw-600 mb-3"><a class="w-100" href="single-car.html"><span class="text-muted">2018</span> Mini Cooper Coupe</a></h5>
                <ul class="list-inline font-size-1 fw-400">
                    <li class="list-inline-item mr-3" title="Mileage">
                        <svg class="icon icon-sm bg-muted" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48.997px" height="48.998px" viewBox="0 0 48.997 48.998" style="enable-background:new 0 0 48.997 48.998;" xml:space="preserve"><path d="M45.961,18.702c-0.033-0.038-0.061-0.075-0.1-0.112l-1.717-1.657c1.424-0.323,2.957-1.516,2.957-2.74
c0-1.426-1.979-1.932-3.668-1.932c-1.766,0-1.971,1.21-1.992,2.065l-4.43-4.271c-0.9-0.891-2.607-1.592-3.883-1.592H24.5h-0.002
h-8.63c-1.275,0-2.981,0.701-3.882,1.592l-4.429,4.271c-0.023-0.855-0.228-2.065-1.992-2.065c-1.691,0-3.669,0.506-3.669,1.932
c0,1.224,1.534,2.417,2.958,2.74l-1.717,1.657c-0.039,0.037-0.066,0.074-0.1,0.112C1.2,20.272,0,23.184,0,25.297v6.279
c0,1.524,0.601,2.907,1.572,3.938v2.435c0,1.424,1.192,2.585,2.658,2.585h3.214c1.466,0,2.657-1.159,2.657-2.585v-0.623h14.397
H24.5h14.396v0.623c0,1.426,1.19,2.585,2.658,2.585h3.213c1.467,0,2.657-1.161,2.657-2.585v-2.435
c0.972-1.031,1.572-2.414,1.572-3.938v-6.279C48.998,23.184,47.798,20.272,45.961,18.702z M13.613,11.953
c0.623-0.519,1.712-0.913,2.255-0.913h8.63H24.5h8.63c0.543,0,1.632,0.394,2.255,0.913l5.809,5.63H24.5h-0.002H7.805L13.613,11.953
z M1.993,24.347c0-1.546,1.21-2.801,2.704-2.801c1.493,0,6.372,2.864,6.372,4.41s-4.879,1.188-6.372,1.188
C3.203,27.144,1.993,25.894,1.993,24.347z M10.102,34.573H9.587H9.072l-3.055,0.005c-0.848-0.264-1.446-0.572-1.869-0.903
c-0.214-0.167-0.378-0.341-0.506-0.514c-0.129-0.175-0.223-0.347-0.284-0.519c-0.38-1.074,0.405-2.061,0.405-2.061h5.214
l3.476,3.99L10.102,34.573L10.102,34.573z M31.996,34.575H24.5h-0.002h-7.496c-1.563,0-2.832-1.269-2.832-2.831h10.328H24.5h10.328
C34.828,33.308,33.559,34.575,31.996,34.575z M32.654,29.812H24.5h-0.002h-8.154c-1.7,0-3.08-2.096-3.08-4.681h11.234H24.5h11.234
C35.734,27.717,34.354,29.812,32.654,29.812z M45.641,32.644c-0.062,0.172-0.156,0.344-0.285,0.518
c-0.127,0.173-0.291,0.347-0.506,0.514c-0.422,0.331-1.021,0.641-1.869,0.903l-3.055-0.005h-0.515h-0.515h-2.353l3.478-3.99h5.213
C45.234,30.583,46.02,31.568,45.641,32.644z M44.301,27.144c-1.492,0-6.371,0.356-6.371-1.188s4.879-4.41,6.371-4.41
c1.494,0,2.704,1.255,2.704,2.801C47.005,25.892,45.795,27.144,44.301,27.144z"></path></svg>
                        <span class="ml-1 align-middle">New</span>
                    </li>
                    <li class="list-inline-item mr-3" title="Transmission">
                        <svg class="icon icon-sm bg-muted" xmlns="http://www.w3.org/2000/svg" height="200" width="200" fill="#000000" data-name="Layer 1" viewBox="0 0 100 100" x="0px" y="0px"><path d="M30,94H70A24,24,0,0,0,94,70V30A24,24,0,0,0,70,6H30A24,24,0,0,0,6,30V70A24,24,0,0,0,30,94ZM14,30A16,16,0,0,1,30,14H70A16,16,0,0,1,86,30V70A16,16,0,0,1,70,86H30A16,16,0,0,1,14,70Z"></path><path d="M30,74a4,4,0,0,0,4-4V54H46V70a4,4,0,0,0,8,0V54h8A12,12,0,0,0,74,42V30a4,4,0,0,0-8,0V42a4,4,0,0,1-4,4H54V30a4,4,0,0,0-8,0V46H34V30a4,4,0,0,0-8,0V70A4,4,0,0,0,30,74Z"></path><circle cx="70" cy="70" r="4"></circle></svg>
                        <span class="ml-1 align-middle">Automatic</span>
                    </li>
                </ul>
                <div class="row justify-content-between align-items-center">
                    <div class="col-8">
                        <h5 class="font-weight-bold mb-0">$22,500</h5>
                    </div>
                    <div class="col-4 text-right">
                        <span class="btn btn-icon btn-danger-soft btn-sm btn-light position-relative no-border">
                            <span class="far fa-heart btn-icon-inner"></span>
                        </span>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>