Product card for Bootstrap Auto Theme
HTML CSS Bootstrap product card for a car sales or rental website.
Super
0
673
HTML CSS Bootstrap product card for a car sales or rental website.
An excellent option with a beautiful design and thoughtful functionality.
HTML
<div class="container-fluid d-flex justify-content-center">
<div class="row mt-5">
<div class="col-sm-4">
<div class="card"> <img src="https://imgur.com/edOjtEC.png" class="card-img-top" width="100%">
<div class="card-body pt-0 px-0">
<div class="d-flex flex-row justify-content-between mb-0 px-3"> <small class="text-muted mt-1">STARTING AT</small>
<h6>$22,495*</h6>
</div>
<hr class="mt-2 mx-3">
<div class="d-flex flex-row justify-content-between px-3 pb-4">
<div class="d-flex flex-column"><span class="text-muted">Fuel Efficiency</span><small class="text-muted">L/100KM*</small></div>
<div class="d-flex flex-column">
<h5 class="mb-0">8.5/7.1</h5><small class="text-muted text-right">(city/Hwy)</small>
</div>
</div>
<div class="d-flex flex-row justify-content-between p-3 mid">
<div class="d-flex flex-column"><small class="text-muted mb-1">ENGINE</small>
<div class="d-flex flex-row"><img src="https://imgur.com/iPtsG7I.png" width="35px" height="25px">
<div class="d-flex flex-column ml-1"><small class="ghj">1.4L MultiAir</small><small class="ghj">16V I-4 Turbo</small></div>
</div>
</div>
<div class="d-flex flex-column"><small class="text-muted mb-2">HORSEPOWER</small>
<div class="d-flex flex-row"><img src="https://imgur.com/J11mEBq.png">
<h6 class="ml-1">135 hp*</h6>
</div>
</div>
</div> <small class="text-muted key pl-3">Standard key Features</small>
<div class="mx-3 mt-3 mb-2"><button type="button" class="btn btn-danger btn-block"><small>BUILD & PRICE</small></button></div> <small class="d-flex justify-content-center text-muted">*Legal Disclaimer</small>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card"> <img src="https://imgur.com/SKZolYE.png" class="card-img-top" width="100%">
<div class="card-body pt-0 px-0">
<div class="d-flex flex-row justify-content-between mb-0 px-3"> <small class="text-muted mt-1">STARTING AT</small>
<h6>$22,495*</h6>
</div>
<hr class="mt-2 mx-3">
<div class="d-flex flex-row justify-content-between px-3 pb-4">
<div class="d-flex flex-column"><span class="text-muted">Fuel Efficiency</span><small class="text-muted">L/100KM*</small></div>
<div class="d-flex flex-column">
<h5 class="mb-0">8.5/7.1</h5><small class="text-muted text-right">(city/Hwy)</small>
</div>
</div>
<div class="d-flex flex-row justify-content-between p-3 mid">
<div class="d-flex flex-column"><small class="text-muted mb-1">ENGINE</small>
<div class="d-flex flex-row"><img src="https://imgur.com/iPtsG7I.png" width="35px" height="25px">
<div class="d-flex flex-column ml-1"><small class="ghj">1.4L MultiAir</small><small class="ghj">16V I-4 Turbo</small></div>
</div>
</div>
<div class="d-flex flex-column"><small class="text-muted mb-2">HORSEPOWER</small>
<div class="d-flex flex-row"><img src="https://imgur.com/J11mEBq.png">
<h6 class="ml-1">135 hp*</h6>
</div>
</div>
</div> <small class="text-muted key pl-3">Standard key Features</small>
<div class="mx-3 mt-3 mb-2"><button type="button" class="btn btn-danger btn-block"><small>BUILD & PRICE</small></button></div> <small class="d-flex justify-content-center text-muted">*Legal Disclaimer</small>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card"> <img src="https://imgur.com/gUQNKPd.png" class="card-img-top" width="100%">
<div class="card-body pt-0 px-0">
<div class="d-flex flex-row justify-content-between mb-0 px-3"> <small class="text-muted mt-1">STARTING AT</small>
<h6>$22,495*</h6>
</div>
<hr class="mt-2 mx-3">
<div class="d-flex flex-row justify-content-between px-3 pb-4">
<div class="d-flex flex-column"><span class="text-muted">Fuel Efficiency</span><small class="text-muted">L/100KM*</small></div>
<div class="d-flex flex-column">
<h5 class="mb-0">8.5/7.1</h5><small class="text-muted text-right">(city/Hwy)</small>
</div>
</div>
<div class="d-flex flex-row justify-content-between p-3 mid">
<div class="d-flex flex-column"><small class="text-muted mb-1">ENGINE</small>
<div class="d-flex flex-row"><img src="https://imgur.com/iPtsG7I.png" width="35px" height="25px">
<div class="d-flex flex-column ml-1"><small class="ghj">1.4L MultiAir</small><small class="ghj">16V I-4 Turbo</small></div>
</div>
</div>
<div class="d-flex flex-column"><small class="text-muted mb-2">HORSEPOWER</small>
<div class="d-flex flex-row"><img src="https://imgur.com/J11mEBq.png">
<h6 class="ml-1">135 hp*</h6>
</div>
</div>
</div> <small class="text-muted key pl-3">Standard key Features</small>
<div class="mx-3 mt-3 mb-2"><button type="button" class="btn btn-danger btn-block"><small>BUILD & PRICE</small></button></div> <small class="d-flex justify-content-center text-muted">*Legal Disclaimer</small>
</div>
</div>
</div>
</div>
</div>CSS style
@import url('https://fonts.googleapis.com/css2?family=Roboto:[email protected]&display=swap');
body {
background: #F5F1EE;
font-family: 'Roboto', sans-serif
}
.card {
width: 250px;
border-radius: 10px
}
.card-img-top {
border-top-right-radius: 10px;
border-top-left-radius: 10px
}
span.text-muted {
font-size: 12px
}
small.text-muted {
font-size: 8px
}
h5.mb-0 {
font-size: 1rem
}
small.ghj {
font-size: 9px
}
.mid {
background: #ECEDF1
}
h6.ml-1 {
font-size: 13px
}
small.key {
text-decoration: underline;
font-size: 9px;
cursor: pointer
}
.btn-danger {
color: #FFCBD2
}
.btn-danger:focus {
box-shadow: none
}
small.justify-content-center {
font-size: 9px;
cursor: pointer;
text-decoration: underline
}
@media screen and (max-width:600px) {
.col-sm-4 {
margin-bottom: 50px
}
}| Bootstrap 4 CSS | https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css | |||
| Bootstrap 4 JS | https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js | |||
| JS | https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js |
Our website is for sale! The domain and website has been running for more than 3 years, but it's time to part with it. There is no price, so I consider any offer. Contact us if you are interested in buying in the feedback form, we will discuss options, price and details for transferring the site. (script, database and everything else for the site to work).
