Bootstrap Cards:

Bootstrap Card with Shopping Style

Cards are such great features for websites. They let you display a short description of a post or product and provide a link to the full details in case your card managed to interest the reader. The concept is amazing and besides, the cards look nice and professional. With that said, why not use cards in an e-commerce website. These online stores need an effective way to display and advertise their special products. They could use the normal list view for ordinary products and in case of a sale, they could use cards to make the users curious about them.

Following is a Bootstrap image card perfect for e-commerce websites. You can use this Bootstrap shopping card to showcase all of your products in your store. This Bootstrap CSS style features a big image at the top in full width. Besides the image, there is also a smaller box at the bottom that contains the main information about the product, including the name, a short description and the link to purchase it. Another really neat feature in this design is the hover effect. When you move your mouse cursor over the card, the image zooms in and a vignette effect appears on it. besides that, the phrase “Buy It” slides into frame from the left side of the image. All of these features make our Bootstrap store card perfect for displaying your products in an online shop.

Bootstrap CSS Style

Bootstrap Shopping Card

Bootstrap Store Card

Bootstrap Image Card

<!-- This script got from frontendfreecode.com -->
<div class="mx-auto col-md-10">
    <div class="card">
        <div class="card-image">
            <a href="#">
                <h3>Buy it</h3>
                <img class="card-img-top img-fluid" src="https://www.frontendfreecode.com/img/lettings-cyprus-long-term-rentals-web-design_full.jpg" alt="Card image cap">
            </a>
        </div>
        <div class="card-body mx-auto">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-info bottom">Go Somewhere</a>
            <p class="card-text">
                <small class="text-muted">
                    Last updated 3 mins ago
                </small>
            </p>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

.card {
  border: 0;
  margin: 5px auto;
  display: flex;
}
.card .card-body {
  z-index: 2;
  margin-top: -1rem;
  background-color: #fff;
  width: 80%;
  position: relative;
}
.card .card-image {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.card .card-image > a > h3 {
  position: absolute;
  top: 0;
  left: 0;
  margin: 5px 0 0;
  z-index: 2;
  background: rgba(60, 48, 48, 0.6);
  color: #d6e3df;
  font-size: 1.5em;
  padding: 3px;
  transition: all 0.5s ease;
  transform: translateX(-100%);
}
.card .card-image img {
  position: relative;
  opacity: 1;
  width: 100%;
  opacity: 0.85;
  transition: 0.5s ease;
}
.card:hover img {
  transform: scale(1.1);
  opacity: 1;
}
.card:hover .card-image > a > h3 {
  transform: translateX(0%);
}
.card .card-body, .card .card-image {
  border-radius: 5px;
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
.card .card-badge-left {
  position: absolute;
  z-index: 3;
  margin-top: 5px;
}
.card .card-badge-left .badge {
  border-radius: 0;
  color: #f37272;
  background: rgba(0, 0, 0, 0.5);
  padding: 8px;
}
.card .bottom {
  float: right;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/esm/popper.js'></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/esm/popper.js'></script>
<style>
.card {
  border: 0;
  margin: 5px auto;
  display: flex;
}
.card .card-body {
  z-index: 2;
  margin-top: -1rem;
  background-color: #fff;
  width: 80%;
  position: relative;
}
.card .card-image {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.card .card-image > a > h3 {
  position: absolute;
  top: 0;
  left: 0;
  margin: 5px 0 0;
  z-index: 2;
  background: rgba(60, 48, 48, 0.6);
  color: #d6e3df;
  font-size: 1.5em;
  padding: 3px;
  transition: all 0.5s ease;
  transform: translateX(-100%);
}
.card .card-image img {
  position: relative;
  opacity: 1;
  width: 100%;
  opacity: 0.85;
  transition: 0.5s ease;
}
.card:hover img {
  transform: scale(1.1);
  opacity: 1;
}
.card:hover .card-image > a > h3 {
  transform: translateX(0%);
}
.card .card-body, .card .card-image {
  border-radius: 5px;
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
.card .card-badge-left {
  position: absolute;
  z-index: 3;
  margin-top: 5px;
}
.card .card-badge-left .badge {
  border-radius: 0;
  color: #f37272;
  background: rgba(0, 0, 0, 0.5);
  padding: 8px;
}
.card .bottom {
  float: right;
}
</style>

</head>
<body>
<div class="mx-auto col-md-10">
    <div class="card">
        <div class="card-image">
            <a href="#">
                <h3>Buy it</h3>
                <img class="card-img-top img-fluid" src="https://www.frontendfreecode.com/img/lettings-cyprus-long-term-rentals-web-design_full.jpg" alt="Card image cap">
            </a>
        </div>
        <div class="card-body mx-auto">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-info bottom">Go Somewhere</a>
            <p class="card-text">
                <small class="text-muted">
                    Last updated 3 mins ago
                </small>
            </p>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS