"product list item"
Bootstrap 3.0.0 Snippet by amirmehrabi

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>eCommerce Product Detail</title> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="card"> <div class="container-fliud"> <div class="wrapper row"> <div class="preview col-md-1"> <img src="http://placekitten.com/400/252" /> </div> <div class="details col-md-10"> <h6 class="product-title">پرواز تهران به مشهد هواپیمایی قشم ایر</h6> <p class="product-description">4 ظرفیت خالی - دو شنبه 6 خرداد - کلاس بیزینس</p> <p class="vote"><strong>1,920,000 تومان</strong></p> </div> <div class="col-md-1"> <div class="action"> <button class="add-to-cart btn btn-default" type="button"> <i class="fa fa-plane"></i> </button> <button class="add-to-cart btn btn-default" type="button"> <i class="fa fa-plane"></i> </button> </div> </div> </div> </div> </div> </div> </body> </html>
/*****************globals*************/ body { font-family: 'Tahoma'; overflow-x: hidden; direction: rtl; } img { max-width: 100%; } .preview { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } @media screen and (max-width: 996px) { .preview { margin-bottom: 10px; } } .preview-pic { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; } .preview-thumbnail.nav-tabs { border: none; margin-top: 15px; } .preview-thumbnail.nav-tabs li { width: 18%; margin-right: 2.5%; } .preview-thumbnail.nav-tabs li img { max-width: 100%; display: block; } .preview-thumbnail.nav-tabs li a { padding: 0; margin: 0; } .preview-thumbnail.nav-tabs li:last-of-type { margin-right: 0; } .tab-content { overflow: hidden; } .tab-content img { width: 100%; -webkit-animation-name: opacity; animation-name: opacity; -webkit-animation-duration: .3s; animation-duration: .3s; } .card { margin-top: 10px; background: #eee; padding: 10px; line-height: 1.5em; } @media screen and (min-width: 997px) { .wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } } .details { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .colors { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; } .product-title, .price, .sizes, .colors { text-transform: UPPERCASE; font-weight: bold; } .checked, .price span { color: #ff9f1a; } .product-title, .rating, .product-description, .price, .vote, .sizes { margin-bottom: 0px; } .product-title { margin-top: 0; border-bottom: 1px solid rgba(0,0,0,0.2); padding-bottom:2px; } .size { margin-right: 10px; } .size:first-of-type { margin-left: 40px; } .color { display: inline-block; vertical-align: middle; margin-right: 10px; height: 2em; width: 2em; border-radius: 2px; } .color:first-of-type { margin-left: 20px; } .add-to-cart, .like { background: #ff9f1a; padding: 8px border: none; text-transform: UPPERCASE; font-weight: bold; color: #fff; -webkit-transition: background .3s ease; transition: background .3s ease; } .add-to-cart:hover, .like:hover { background: #b36800; color: #fff; } .not-available { text-align: center; line-height: 2em; } .not-available:before { font-family: fontawesome; content: "\f00d"; color: #fff; } .orange { background: #ff9f1a; } .green { background: #85ad00; } .blue { background: #0076ad; } .tooltip-inner { padding: 10px; } @-webkit-keyframes opacity { 0% { opacity: 0; -webkit-transform: scale(3); transform: scale(3); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes opacity { 0% { opacity: 0; -webkit-transform: scale(3); transform: scale(3); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } /*# sourceMappingURL=style.css.map */

Related: See More

Rotating CSS Card
Bootstrap 4 and CCS3 Product Cards with Transition
eCommerce Product Detail
Product Detail Page - Ecommerce

Questions / Comments: