<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> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid"> <div class="container"> <div class="row rtl text-center"> <div class="col "> <h1 class="font-ir-bold section-name">اسکوترهای برقی</h1> <h6 class="text-right w-50 d-inline-block">اسکوتر های برقی با برندهای مختلف در فروشگاه آماده فروش می باشند.</h6> <a href="#" class="text-dark float-right d-inline-block small">نمایش محصولات موجود</a> </div><!--.col--> </div><!--.row--> <div class="row rtl text-right mt-5"> <div class="col-md-2"> <div class="product-0507"> <div class="card border-0"> <div class="card-img"> <div class="flag flag-green"><span>جدید</span></div> <div class="flag flag-yellow"><span>ویژه</span></div> <img src="http://www.mihanmedia.ir/userfile/p-1.jpg" class="img-fluid"> </div> <a href="#" class="card-title small mt-2 text-dark">اسکوتر برقی تاشو Xiaomi Mijia</a> <div class="card-body p-0"> <div class="not-exist bg-danger float-left rounded-circle text-light p-1 small text-center" style="width: 3rem;">موجود نیست</div> </div><!--.card-body--> <div class="card-footer border-0 bg-white p-0"> <a href="#" class="text-muted small"> <i class="fas fa-shopping-cart"></i> <span>افزودن به سبد خرید</span> </a> </div><!--.card-footer--> </div><!--.card--> </div><!--.product-0507--> </div><!--.col--> <div class="col-md-2"> <div class="product-0507"> <div class="card border-0"> <div class="card-img"> <img src="http://www.mihanmedia.ir/userfile/p-1.jpg" class="img-fluid"> </div> <a href="#" class="card-title small mt-2 text-dark">اسکوتر برقی تاشو Xiaomi Mijia</a> <div class="card-body p-0"> <div class="price small">1,500,000 تومان</div> <del class="old-price small">2,000,000</del> </div><!--.card-body--> <div class="card-footer border-0 bg-white p-0"> <a href="#" class="text-muted small"> <i class="fas fa-shopping-cart"></i> <span>افزودن به سبد خرید</span> </a> </div><!--.card-footer--> </div><!--.card--> </div><!--.product-0507--> </div><!--.col--> <div class="col-md-2"> <div class="product-0507"> <div class="card border-0"> <div class="card-img"> <img src="http://www.mihanmedia.ir/userfile/p-1.jpg" class="img-fluid"> </div> <a href="#" class="card-title small mt-2 text-dark">اسکوتر برقی تاشو Xiaomi Mijia</a> <div class="card-body p-0"> <div class="not-exist bg-danger float-left rounded-circle text-light p-1 small text-center" style="width: 3rem;">موجود نیست</div> </div><!--.card-body--> <div class="card-footer border-0 bg-white p-0"> <a href="#" class="text-muted small"> <i class="fas fa-shopping-cart"></i> <span>افزودن به سبد خرید</span> </a> </div><!--.card-footer--> </div><!--.card--> </div><!--.product-0507--> </div><!--.col--> <div class="col-md-2"> <div class="product-0507"> <div class="card border-0"> <div class="card-img"> <img src="http://www.mihanmedia.ir/userfile/p-1.jpg" class="img-fluid"> </div> <a href="#" class="card-title small mt-2 text-dark">اسکوتر برقی تاشو Xiaomi Mijia</a> <div class="card-body p-0"> <div class="price small">1,500,000 تومان</div> <del class="old-price small">2,000,000</del> </div><!--.card-body--> <div class="card-footer border-0 bg-white p-0"> <a href="#" class="text-muted small"> <i class="fas fa-shopping-cart"></i> <span>افزودن به سبد خرید</span> </a> </div><!--.card-footer--> </div><!--.card--> </div><!--.product-0507--> </div><!--.col--> </div><!--.row--> </div><!--.container--> </div><!--.container-fluid-->

.rtl{ direction: rtl !important; } .product-0507{ float: right; margin-bottom: 3rem; } .product-0507:last-child{ margin-left: 0; } .product-0507 .card-title{ height: 2rem; overflow-y: hidden; } .product-0507 .card-body{ height: 3rem; overflow-y: hidden; } .product-0507 .price{ color: #129812; font-family: IRANSans-bold; } .product-0507 .old-price{ letter-spacing: 3px; } .flag{ padding-top: 0.6rem; position: absolute; top:0; right:0.3rem; width:20px; height:38px; color: #fff; font-size:0.7rem; } .flag-green{ background: url("http://www.mihanmedia.ir/userfile/flag-green.png") no-repeat; font-size:0.5rem; } .flag-yellow{ background: url("http://www.mihanmedia.ir/userfile/flag-yellow.png") no-repeat; right:2rem !important; } .flag span{ display: block; /* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg); /* IE */ -ms-transform: rotate(-90deg); /* Opera */ -o-transform: rotate(-90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }