Bootstrap Snippet Responsive car dealership details cards using HTML CSS Bootstrap

"Responsive car dealership details cards"
Bootstrap 4.1.1 Snippet by MMLTech

4.1.1

952 0 Fav

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  <!DOCTYPE html> <html lang="en"> <head> <title>Responsive car dealership details cards</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="style.css"/> </head> <body> <div class="container pt-5"> <div class="row"> <div class="col-12"> <h1>Responsive car dealership details cards</h1> <hr> </div> <div class="col-12"> <article class="card car-details label-info sponsored"> <div class="card-body"> <div class="d-flex flex-md-row align-items-md-start align-items-center flex-column"> <div class="thumbnail position-relative mb-md-0 mb-3"> <img src="https://plhold.com/img/220x170.png" data-zoom="https://plhold.com/img/1920x1484.png" /> </div> <div class="w-100"> <div class="d-flex flex-md-row flex-column"> <h3 class="mr-3">Volkswagen Golf VI Cabriolet 1.4 TSI Navi Xenon SR18 WR AHK</h3> <div class="ml-auto text-right"> <h3>$21.000</h3> <ul class="rating"> <li><i class="fas fa-star text-warning"></i></li> <li><i class="fas fa-star text-warning"></i></li> <li><i class="fas fa-star text-warning"></i></li> <li><i class="fas fa-star text-grey"></i></li> <li><i class="fas fa-star text-grey"></i></li> </ul> </div> </div> <hr> <div class="container-fluid"> <div class="row"> <div class="col-md-4 col-12"> <ul> <li><i class="fas fa-tachometer-alt"></i> <strong>Millage:</strong> 255,000 KM </li> <li><i class="fas fa-users"></i> <strong>Prev Owners:</strong> 3</li> <li><i class="fas fa-calendar"></i> <strong>First Registration:</strong> 2018</li> <li><i class="fas fa-info-circle"></i> <strong>Displacement:</strong> 1,390cc</li> <li><i class="fas fa-info-circle"></i> <strong>Perfomance:</strong> 118 kW (160 hp)</li> </ul> </div> <div class="col-md-8 col-12"> <ul> <li><i class="fas fa-info-circle"></i> <strong>Fuel Type:</strong> Petrol </li> <li><i class="fas fa-info-circle"></i> <strong>Consumption(combined):</strong> approx. 6.4 l/100km</li> <li><i class="fas fa-info-circle"></i> <strong>CO₂ Emissions:</strong> approx. 150 g/km (combined)</li> <li data-toggle="tooltip" title="The emission class determines the tax bracket of a vehicle. You can find it under number 14 in the registration certificate part 1 (vehicle registration)."><i class="fas fa-info-circle"></i> <strong>Emission Class:</strong> 1,390cc</li> <li><i class="fas fa-info-circle"></i> <strong>Perfomance:</strong> 118 kW (160 hp)</li> </ul> </div> <div class="col-12"> <div class="d-flex flex-md-row flex-column align-items-center justify-content-end"> <button class="btn btn-success w-100 mb-md-0 mb-3 mr-md-3 mr-0"><i class="fas fa-phone"></i> Contact Seller</button> <button class="btn btn-default w-100 mb-md-0 mb-3 mr-md-3 mr-0"><i class="fas fa-parking"></i> Park</button> <button class="btn btn-default w-100"><i class="fas fa-comment"></i> Comments(18)</button> </div> </div> </div> </div> </div> </div> </div> </article> <article class="card car-details label-primary new"> <div class="card-body"> <div class="d-flex flex-md-row align-items-md-start align-items-center flex-column"> <div class="thumbnail position-relative mb-md-0 mb-3"> <img src="https://plhold.com/img/220x170.png" data-zoom="https://plhold.com/img/1920x1484.png" /> </div> <div class="w-100"> <div class="d-flex flex-md-row flex-column"> <h3 class="mr-3">Volkswagen Golf VI Cabriolet 1.4 TSI Navi Xenon SR18 WR AHK</h3> <div class="ml-auto text-right"> <h3>$21.000</h3> <ul class="rating"> <li><i class="fas fa-star text-warning"></i></li> <li><i class="fas fa-star text-warning"></i></li> <li><i class="fas fa-star text-warning"></i></li> <li><i class="fas fa-star text-grey"></i></li> <li><i class="fas fa-star text-grey"></i></li> </ul> </div> </div> <hr> <div class="container-fluid"> <div class="row"> <div class="col-md-4 col-12"> <ul> <li><i class="fas fa-tachometer-alt"></i> <strong>Millage:</strong> 255,000 KM </li> <li><i class="fas fa-users"></i> <strong>Prev Owners:</strong> 3</li> <li><i class="fas fa-calendar"></i> <strong>First Registration:</strong> 2018</li> <li><i class="fas fa-info-circle"></i> <strong>Displacement:</strong> 1,390cc</li> <li><i class="fas fa-info-circle"></i> <strong>Perfomance:</strong> 118 kW (160 hp)</li> </ul> </div> <div class="col-md-8 col-12"> <ul> <li><i class="fas fa-info-circle"></i> <strong>Fuel Type:</strong> Petrol </li> <li><i class="fas fa-info-circle"></i> <strong>Consumption(combined):</strong> approx. 6.4 l/100km</li> <li><i class="fas fa-info-circle"></i> <strong>CO₂ Emissions:</strong> approx. 150 g/km (combined)</li> <li data-toggle="tooltip" title="The emission class determines the tax bracket of a vehicle. You can find it under number 14 in the registration certificate part 1 (vehicle registration)."><i class="fas fa-info-circle"></i> <strong>Emission Class:</strong> 1,390cc</li> <li><i class="fas fa-info-circle"></i> <strong>Perfomance:</strong> 118 kW (160 hp)</li> </ul> </div> <div class="col-12"> <div class="d-flex flex-md-row flex-column align-items-center justify-content-end"> <button class="btn btn-success w-100 mb-md-0 mb-3 mr-md-3 mr-0"><i class="fas fa-phone"></i> Contact Seller</button> <button class="btn btn-default w-100 mb-md-0 mb-3 mr-md-3 mr-0"><i class="fas fa-parking"></i> Park</button> <button class="btn btn-default w-100"><i class="fas fa-comment"></i> Comments(18)</button> </div> </div> </div> </div> </div> </div> </div> </article> <article class="card car-details label-success new"> <div class="card-body"> <div class="d-flex flex-md-row align-items-md-start align-items-center flex-column"> <div class="thumbnail position-relative mb-md-0 mb-3"> <img src="https://plhold.com/img/220x170.png" data-zoom="https://plhold.com/img/1920x1484.png" /> </div> <div class="w-100"> <div class="d-flex flex-md-row flex-column"> <h3 class="mr-3">Volkswagen Golf VI Cabriolet 1.4 TSI Navi Xenon SR18 WR AHK</h3> <div class="ml-auto text-right"> <h3>$21.000</h3> <ul class="rating"> <li><i class="fas fa-star text-warning"></i></li> <li><i class="fas fa-star text-warning"></i></li> <li><i class="fas fa-star text-warning"></i></li> <li><i class="fas fa-star text-grey"></i></li> <li><i class="fas fa-star text-grey"></i></li> </ul> </div> </div> <hr> <div class="container-fluid"> <div class="row"> <div class="col-md-4 col-12"> <ul> <li><i class="fas fa-tachometer-alt"></i> <strong>Millage:</strong> 255,000 KM </li> <li><i class="fas fa-users"></i> <strong>Prev Owners:</strong> 3</li> <li><i class="fas fa-calendar"></i> <strong>First Registration:</strong> 2018</li> <li><i class="fas fa-info-circle"></i> <strong>Displacement:</strong> 1,390cc</li> <li><i class="fas fa-info-circle"></i> <strong>Perfomance:</strong> 118 kW (160 hp)</li> </ul> </div> <div class="col-md-8 col-12"> <ul> <li><i class="fas fa-info-circle"></i> <strong>Fuel Type:</strong> Petrol </li> <li><i class="fas fa-info-circle"></i> <strong>Consumption(combined):</strong> approx. 6.4 l/100km</li> <li><i class="fas fa-info-circle"></i> <strong>CO₂ Emissions:</strong> approx. 150 g/km (combined)</li> <li data-toggle="tooltip" title="The emission class determines the tax bracket of a vehicle. You can find it under number 14 in the registration certificate part 1 (vehicle registration)."><i class="fas fa-info-circle"></i> <strong>Emission Class:</strong> 1,390cc</li> <li><i class="fas fa-info-circle"></i> <strong>Perfomance:</strong> 118 kW (160 hp)</li> </ul> </div> <div class="col-12"> <div class="d-flex flex-md-row flex-column align-items-center justify-content-end"> <button class="btn btn-success w-100 mb-md-0 mb-3 mr-md-3 mr-0"><i class="fas fa-phone"></i> Contact Seller</button> <button class="btn btn-default w-100 mb-md-0 mb-3 mr-md-3 mr-0"><i class="fas fa-parking"></i> Park</button> <button class="btn btn-default w-100"><i class="fas fa-comment"></i> Comments(18)</button> </div> </div> </div> </div> </div> </div> </div> </article> <article class="card car-details label-warning new"> <div class="card-body"> <div class="d-flex flex-md-row align-items-md-start align-items-center flex-column"> <div class="thumbnail position-relative mb-md-0 mb-3"> <img src="https://plhold.com/img/220x170.png" data-zoom="https://plhold.com/img/1920x1484.png" /> </div> <div class="w-100"> <div class="d-flex flex-md-row flex-column"> <h3 class="mr-3">Volkswagen Golf VI Cabriolet 1.4 TSI Navi Xenon SR18 WR AHK</h3> <div class="ml-auto text-right"> <h3>$21.000</h3> <ul class="rating"> <li><i class="fas fa-star text-warning"></i></li> <li><i class="fas fa-star text-warning"></i></li> <li><i class="fas fa-star text-warning"></i></li> <li><i class="fas fa-star text-grey"></i></li> <li><i class="fas fa-star text-grey"></i></li> </ul> </div> </div> <hr> <div class="container-fluid"> <div class="row"> <div class="col-md-4 col-12"> <ul> <li><i class="fas fa-tachometer-alt"></i> <strong>Millage:</strong> 255,000 KM </li> <li><i class="fas fa-users"></i> <strong>Prev Owners:</strong> 3</li> <li><i class="fas fa-calendar"></i> <strong>First Registration:</strong> 2018</li> <li><i class="fas fa-info-circle"></i> <strong>Displacement:</strong> 1,390cc</li> <li><i class="fas fa-info-circle"></i> <strong>Perfomance:</strong> 118 kW (160 hp)</li> </ul> </div> <div class="col-md-8 col-12"> <ul> <li><i class="fas fa-info-circle"></i> <strong>Fuel Type:</strong> Petrol </li> <li><i class="fas fa-info-circle"></i> <strong>Consumption(combined):</strong> approx. 6.4 l/100km</li> <li><i class="fas fa-info-circle"></i> <strong>CO₂ Emissions:</strong> approx. 150 g/km (combined)</li> <li data-toggle="tooltip" title="The emission class determines the tax bracket of a vehicle. You can find it under number 14 in the registration certificate part 1 (vehicle registration)."><i class="fas fa-info-circle"></i> <strong>Emission Class:</strong> 1,390cc</li> <li><i class="fas fa-info-circle"></i> <strong>Perfomance:</strong> 118 kW (160 hp)</li> </ul> </div> <div class="col-12"> <div class="d-flex flex-md-row flex-column align-items-center justify-content-end"> <button class="btn btn-success w-100 mb-md-0 mb-3 mr-md-3 mr-0"><i class="fas fa-phone"></i> Contact Seller</button> <button class="btn btn-default w-100 mb-md-0 mb-3 mr-md-3 mr-0"><i class="fas fa-parking"></i> Park</button> <button class="btn btn-default w-100"><i class="fas fa-comment"></i> Comments(18)</button> </div> </div> </div> </div> </div> </div> </div> </article> <article class="card car-details label-danger new"> <div class="card-body"> <div class="d-flex flex-md-row align-items-md-start align-items-center flex-column"> <div class="thumbnail position-relative mb-md-0 mb-3"> <img src="https://plhold.com/img/220x170.png" data-zoom="https://plhold.com/img/1920x1484.png" /> </div> <div class="w-100"> <div class="d-flex flex-md-row flex-column"> <h3 class="mr-3">Volkswagen Golf VI Cabriolet 1.4 TSI Navi Xenon SR18 WR AHK</h3> <div class="ml-auto text-right"> <h3>$21.000</h3> <ul class="rating"> <li><i class="fas fa-star text-warning"></i></li> <li><i class="fas fa-star text-warning"></i></li> <li><i class="fas fa-star text-warning"></i></li> <li><i class="fas fa-star text-grey"></i></li> <li><i class="fas fa-star text-grey"></i></li> </ul> </div> </div> <hr> <div class="container-fluid"> <div class="row"> <div class="col-md-4 col-12"> <ul> <li><i class="fas fa-tachometer-alt"></i> <strong>Millage:</strong> 255,000 KM </li> <li><i class="fas fa-users"></i> <strong>Prev Owners:</strong> 3</li> <li><i class="fas fa-calendar"></i> <strong>First Registration:</strong> 2018</li> <li><i class="fas fa-info-circle"></i> <strong>Displacement:</strong> 1,390cc</li> <li><i class="fas fa-info-circle"></i> <strong>Perfomance:</strong> 118 kW (160 hp)</li> </ul> </div> <div class="col-md-8 col-12"> <ul> <li><i class="fas fa-info-circle"></i> <strong>Fuel Type:</strong> Petrol </li> <li><i class="fas fa-info-circle"></i> <strong>Consumption(combined):</strong> approx. 6.4 l/100km</li> <li><i class="fas fa-info-circle"></i> <strong>CO₂ Emissions:</strong> approx. 150 g/km (combined)</li> <li data-toggle="tooltip" title="The emission class determines the tax bracket of a vehicle. You can find it under number 14 in the registration certificate part 1 (vehicle registration)."><i class="fas fa-info-circle"></i> <strong>Emission Class:</strong> 1,390cc</li> <li><i class="fas fa-info-circle"></i> <strong>Perfomance:</strong> 118 kW (160 hp)</li> </ul> </div> <div class="col-12"> <div class="d-flex flex-md-row flex-column align-items-center justify-content-end"> <button class="btn btn-success w-100 mb-md-0 mb-3 mr-md-3 mr-0"><i class="fas fa-phone"></i> Contact Seller</button> <button class="btn btn-default w-100 mb-md-0 mb-3 mr-md-3 mr-0"><i class="fas fa-parking"></i> Park</button> <button class="btn btn-default w-100"><i class="fas fa-comment"></i> Comments(18)</button> </div> </div> </div> </div> </div> </div> </div> </article> </div> </div> </div> </body> <div style="position: fixed;bottom: 5%;right: 5%;padding: 1rem;background: #fff;border: 1px solid #e9ecef;border-radius: 0.35rem;color: #a9aeb3;box-shadow: 0 0 20px #e9ecef;"> <h5 style="margin-bottom: 1rem;padding-bottom: 1rem;text-align: center;">Support my work @ MMLTech</h5> <div style="display: flex;align-items: center;"> <a style="margin-right:1rem;background: #d1e6fd;display: block;padding: 1rem;border-radius: 0.25rem;border: 1px solid #e9ecef;color: #000;font-weight: bold;" href="https://ko-fi.com/mmltech" target="_blank"><img src="https://storage.ko-fi.com/cdn/Kofi_Logo_Blue.svg" width="60px"/> Buy me a coffee</a> <a style="background: #d1e6fd;display: block;padding: 1rem;border-radius: 0.25rem;border: 1px solid #e9ecef;color: #000;font-weight: bold;" href="https://obscountdown.com" target="_blank"><img src="https://streamcd.net/Assets/images/logo-white.png" width="60px" height="19px" /> My projects</a> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script src="main.js"></script> </html>

article.card.car-details { border: 1px solid #f8f9fa; box-shadow: 0 0 20px 0px #dee2e6; cursor: pointer; overflow: hidden; -webkit-transition: 0.3s all; -moz-transition: 0.3s all; -ms-transition: 0.3s all; -o-transition: 0.3s all; transition: 0.3s all; } article.card.car-details h3 { font-size: 1.3rem; font-weight: bold; margin-bottom: 0; } article.card.car-details ul { list-style-type: none; margin: 0; padding: 0; } article.card.car-details ul li { margin-bottom: 1rem; } article.card.car-details ul li i { width: 24px; } article.card.car-details ul.rating { display: flex; font-size: 0.95rem; margin-top: 1rem; } article.card.car-details ul.rating li { margin-bottom: 0; } article.card.car-details ul.rating li:not(:last-child) { margin-right: 0.25rem; } article.card.car-details .thumbnail { width: 220px; height: 170px; margin-right: 1rem; border: 1px solid #e9ecef; cursor: zoom-in; } article.card.car-details .thumbnail:after { content: "\f00e"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: -1px; bottom: -1px; padding: 0.35rem 0.75rem; border: 1px solid #e9ecef; background: #0000000d; color: #6c757d; } article.card.car-details:not(:last-child) { margin-bottom: 2rem; } article.card.car-details:hover { background: #f8f9fa; } article.card.car-details:before { width: 200px; color: #fff; position: absolute; transform: rotate(-45deg); z-index: 1; text-align: center; padding: 0.35rem; top: 35px; left: -50px; font-weight: bold; } article.card.car-details.new:before { content: "NEW"; } article.card.car-details.sponsored:before { content: "SPONSORED"; } article.card.car-details.label-info:before { background: #1DA1F2; } article.card.car-details.label-primary:before { background: #004b9d; } article.card.car-details.label-success:before { background: #218939; } article.card.car-details.label-warning:before { background: #cb9b08; } article.card.car-details.label-danger:before { background: #b23737; } article.card.car-details.label-purple:before { background: #7032c2; } .text-grey { color: #bbbbbb; } .btn-default { background: #fff; border: 1px solid #e9ecef; } .btn-default i { color: #8e6c06; } /*# sourceMappingURL=style.css.map */

Related: See More

Full Calendar

Responsive Data Cards (Bootstrap 4)

Responsive Data Cards (Bootstrap 4)

Information Cards

Information Cards

Bootstrap 4 and CCS3 Product Cards with Transition

Bootstrap 4 and CCS3 Product Cards with Transition

Questions / Comments:

Posting GuidelinesFormatting