Ecommerce Product Display Using Bootstrap Card

 <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


<div class="container">
	  <div class="row">
		 <div class="col-md-3">
		    <div class="card border-0">
			  <div class="card-img-top">
				 <img class="img-fluid" src="images/destination1.jpg">
				 <div class="discount">23%</div>
			  </div> 
			  <div class="card-body">
				 <h5>Redme Note-4</h5>
				 <p class="card-text">Rs.25,999</p>
			  </div>
			  <div class="card-footer">
				<a class="card-link btn btn-warning btn-sm" href="#">Buy Now</a>
				<a class="card-link float-right" href="#">Details</a>
				<div class="clearfix"></div>
			  </div>
			</div>
		 </div>
		  
		 <div class="col-md-3">
		    <div class="card border-0">
			  <div class="card-img-top">
				 <img class="img-fluid" src="images/destination2.jpg">
				 <div class="discount">23%</div>
			  </div> 
			  <div class="card-body">
				 <h5>Redme Note-4</h5>
				 <p class="card-text">Rs.25,999</p>
			  </div>
			  <div class="card-footer">
				<a class="card-link btn btn-warning btn-sm" href="#">Buy Now</a>
				<a class="card-link float-right" href="#">Details</a>
				<div class="clearfix"></div>
			  </div>
			</div>
		 </div>
		  
		 <div class="col-md-3">
		    <div class="card border-0">
			  <div class="card-img-top">
				 <img class="img-fluid" src="images/destination4.jpg">
				 <div class="discount">23%</div>
			  </div> 
			  <div class="card-body">
				 <h5>Redme Note-4</h5>
				 <p class="card-text">Rs.25,999</p>
			  </div>
			  <div class="card-footer">
				<a class="card-link btn btn-warning btn-sm" href="#">Buy Now</a>
				<a class="card-link float-right" href="#">Details</a>
				<div class="clearfix"></div>
			  </div>
			</div>
		 </div>
		  
		  
		 <div class="col-md-3">
		    <div class="card border-0">
			  <div class="card-img-top">
				 <img class="img-fluid" src="images/destination3.jpg">
				 <div class="discount">23%</div>
			  </div> 
			  <div class="card-body">
				 <h5>Redme Note-4</h5>
				 <p class="card-text">Rs.25,999</p>
			  </div>
			  <div class="card-footer">
				<a class="card-link btn btn-warning btn-sm" href="#">Buy Now</a>
				<a class="card-link float-right" href="#">Details</a>
				<div class="clearfix"></div>
			  </div>
			</div>
		 </div>
	  </div>
	</div>

.card
{
	border-radius: 0px;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(217,217,217,1);
    -moz-box-shadow: 0px 0px 5px 0px rgba(217,217,217,1);
    box-shadow: 0px 0px 5px 0px rgba(217,217,217,1);
	transition: all ease 0.3s;
}

.card:hover
{
	-webkit-box-shadow: 0px 0px 26px 0px rgba(214,214,214,1);
-moz-box-shadow: 0px 0px 26px 0px rgba(214,214,214,1);
box-shadow: 0px 0px 26px 0px rgba(214,214,214,1);
}

h1,h2,h3,h4,h5,p
{
	margin: 0px;
	padding: 0px;
}

.card-body
{
	padding: 10px;
}

.card-body h5
{
	font-size: 15px;
}

.card-footer
{
	margin: 0px;
	padding: 10px;
}

.btn-success
{
	font-size: 11px;
}

.card-link
{
	font-size: 13px;
}

.card-img-top img
{
	position: relative;
}

.discount
{
	position: absolute;
	width: 50px;
	height: 50px;
	line-height: 45px;
	color: #fff;
	text-align: center;
	border-radius: 100%;
	background:#1AD208;
	top: 10px;
	left: 10px;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(217,217,217,1);
-moz-box-shadow: 0px 0px 5px 0px rgba(217,217,217,1);
box-shadow: 0px 0px 5px 0px rgba(217,217,217,1);
}