"Card"
Bootstrap 3.3.0 Snippet by xrozix

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div class="container"> <div class="row"> <div class="col-md-4">Something over here</div> <div class="col-md-8"> <div class='col-md-12 card bordered'> <div class="col-md-12 text-center"> <h4>Product-ID-SKU</h4> </div> <div class="col-md-4 float-left"> <img src="https://s0.2mdn.net/5164901/1-SciFiOrange_300x250.jpg" /> </div> <div class="col-md-8"> There's a lot more to go here. This is the beginning product description. Going to keep going and make sure multiple lines are filled. This product is great though! Just to be clear! <div class="row bottom"> <div class="col-md-6 left"> <h4>$1,999.99</h4> </div> <div class="col-md-6 right"> <button class="btn btn-success">Buy now</button> </div> </div> </div> </div> </div> </div> </div>
.bordered {border:1px solid black} .card { height:220px; overflow:auto } .card img { height:150px } .bottom { vertical-align:bottom }

Related: See More


Questions / Comments: