"product layout"
Bootstrap 3.0.0 Snippet by sajawal

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' class=''> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'> </head> <body> <main> <div class="section section-gray"> <div class="section-content"> <div class="product-details"> <ul class="product-images"> <li class="preview"><img src="http://static.zara.net/photos///2016/I/0/1/p/6756/201/800/2/w/1024/6756201800_2_6_1.jpg?ts=1472203990151" alt=""></li> <!-- Don't show small pictures if there's only 1 --> <li> <a href="javascript:void(0)"><img src="http://static.zara.net/photos///2016/I/0/1/p/6756/201/800/2/w/1024/6756201800_2_6_1.jpg?ts=1472203990151" alt=""></a> </li> <li> <a href="javascript:void(0)"><img src="http://static.zara.net/photos///2016/I/0/1/p/6756/201/800/2/w/1024/6756201800_1_1_1.jpg?ts=1472213925652" alt=""></a> </li> <li> <a href="javascript:void(0)"><img src="http://static.zara.net/photos///2016/I/0/1/p/6756/201/802/2/w/1024/6756201802_2_5_1.jpg?ts=1472203996493" alt=""></a> </li> <li> <a href="javascript:void(0)"><img src="http://static.zara.net/photos///2016/I/0/1/p/6756/201/802/2/w/1024/6756201802_1_1_1.jpg?ts=1472556621736" alt=""></a> </li> </ul> <ul class="product-info"> <li class="product-name">Knit Beanie</li> <li class="product-price"><span>€</span><span>20.00</span></li> <li class="product-attributes"> <ul class="fields"> <li> <div class="field-name">Color:</div> <label> <input type="radio" name="color"> Gray </label> <label> <input type="radio" name="color"> Black </label> </li> <li> <div class="field-name">Size:</div> <label> <input type="radio" name="size"> Kids </label> <label> <input type="radio" name="size"> Adults </label> </li> </ul> </li> <li class="product-addtocart"> <button>Add To Cart</button> </li> <li class="product-description"> <p>Beautiful girls need beautiful hats. :)</p> <p>This string is randomly generated. The standard default text is designed to ramble about nothing. The standard default text is designed to ramble about nothing. This string is randomly generated.</p> <p>Whoever evaluates your text cannot evaluate the way you write. Default text creates the illusion of real text. Your design looks awesome by the way. If it is not real text, they will focus on the design.</p> </li> </ul> </div> </div> </div> <div class="section"> <div class="section-title"><h2>Check Out More Hats</h2></div> <div class="section-content"> <ul class="product-list"> <li> <a href="javascript:void(0)" class="product"> <div class="product-image"><img src="http://static.zara.net/photos///2016/I/0/1/p/6756/201/800/2/w/1024/6756201800_2_6_1.jpg?ts=1472203990151" alt=""></div> <div class="product-name">Knit Beanie</div> <div class="product-price"><span>€</span><span>20.00</span></div> </a> </li> </ul> </div> </div> </main> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script >var Chef = { init: function() { this.productImagePreview(); }, productImagePreview: function() { $(document).on('click', '.product-images li', function() { if (!$(this).hasClass('preview')) { var src = $(this).find('img').attr('src'); $('.product-images .preview img').attr('src', src); } }); } }; $(function() { Chef.init(); }); //# sourceURL=pen.js </script> </body></html>
@import "https://fonts.googleapis.com/css?family=Open+Sans&subset=latin-ext"; * { box-sizing: border-box; } body { font-family: 'Open Sans', sans-serif; font-size: 14px; } b, strong, h1, h2, h3, h4, h5, h6 { font-weight: bold; } .hidden { display: none; } small { font-size: 10px; color: #666; } p { margin: 0.5em 0; } img { max-width: 100%; height: auto; border:1px; } main .section { padding: 40px 0; } main .section.section-gray { background: White; } main .section .section-title { text-align: center; font-size: 20px; margin-bottom: 25px; } main .section .section-content { width: 70%; max-width: 1024px; margin: 0 auto; position: relative; } @media only screen and (max-width: 959px) { main .section .section-content { width: calc(100% - 80px); } } /** Product details */ .product-details { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: distribute; justify-content: space-around; } .product-details .product-images { width: 50%; } @media only screen and (max-width: 959px) { .product-details .product-images { width: 100%; } } .product-details .product-images > li { display: inline-block; width: 64px; height: product-dimenstions(64px); overflow: hidden; margin: 5px; } .product-details .product-images > li.preview { width: 100%; height: auto; margin: 0; } .product-details .product-images img { display: block; width: 100%; } .product-details .product-info { width: 40%; margin-left: 10%; } @media only screen and (max-width: 959px) { .product-details .product-info { width: 100%; margin-left: 0; } } .product-details .product-info > li { margin: 10px 0; } .product-details .product-info .product-name { font-size: 20px; font-weight: bold; } .product-details .product-info .product-price { font-size: 18px; color: #666; } .product-details .product-info .product-attributes { width: 66%; margin-top: 40px; } .product-details .product-info .product-addtocart { width: 66%; margin: 20px 0 40px; } @media only screen and (max-width: 959px) { .product-details .product-info .product-addtocart { width: 33%; } } .product-details .product-info .product-addtocart button { width: 100%; cursor: pointer; background: #000; color: #fff; display: block; border: none; outline: none; padding: 10px; } .product-details .product-info .product-addtocart button:hover { background: #1a1a1a; } .product-details .product-info .product-description { font-size: 12px; } /** Product list */ .product-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /** Product */ .product { display: block; width: 150px; height: calc($value + $value * 0.1); margin: 5px; overflow: hidden; text-align: center; } @media only screen and (max-width: 767px) { .product { width: 280px; height: calc($value + $value * 0.1); } } @media only screen and (min-width: 1359px) { .product { width: 210px; height: calc($value + $value * 0.1); } } .product .product-image { background: #eee; } .product .product-image img { display: block; width: 100%; } .product .product-name { font-weight: bold; margin: 10px 0 5px; } a.product { color: #000; text-decoration: none; } /** Fields and forms */ .fields > li { margin-bottom: 10px; } .fields .field-name { display: block; font-weight: bold; margin-bottom: 5px; } label { cursor: pointer; white-space: nowrap; }

Related: See More

Vue Argon Design System
social network layout - bootstrap 4
Bootstrap 4 and CCS3 Product Cards with Transition
Zigzag Timeline Layout

Questions / Comments: