"Data List Product"
Bootstrap 3.0.0 Snippet by peterxp

<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 ----------> <div class="container"> <div class="row"> <div id="catlist"> <dl> <dt><img src="http://placehold.it/300x200" alt="Product image" width="93" height="62" /><strong>Some info text here</strong><a href="#">The Name of the Product Goes here</a></dt> <dd> <p>The description of whatever the heading is about goes here. The description of whatever the heading is about goes here.The description of whatever the heading is about goes here.</p> </dd> </dl> <dl> <dt><img src="http://placehold.it/300x200" alt="Product image" width="93" height="62" /><strong>Some info text here</strong><a href="#">The Name of the Product Goes here</a></dt> <dd> <p>The description of whatever the heading is about goes here. The description of whatever the heading is about goes here.The description of whatever the heading is about goes here.</p> <p>Another line of text to show that it doesn't wrap under the image. Another line of text to show that it doesn't wrap under the image. </p> </dd> </dl> <dl> <dt><img src="http://placehold.it/300x200" alt="Product image" width="93" height="62" /><strong>Some info text here</strong><a href="#">The Name of the Product Goes here but with a longer line so that it wraps to the next line.</a></dt> <dd> <p>The description of whatever the heading is about goes here. The description of whatever the heading is about goes here.The description of whatever the heading is about goes here.</p> </dd> </dl> <dl> <dt><img src="http://placehold.it/300x200" alt="Product image" width="93" height="62" /><strong>Some info text here</strong><a href="#">The Name of the Product Goes here</a></dt> <dd> <p>The description of whatever the heading is about goes here. The description of whatever the heading is about goes here.The description of whatever the heading is about goes here.</p> </dd> </dl> <dl> <dt><img src="http://placehold.it/300x200" alt="Product image" width="93" height="62" /><strong>Some info text here</strong><a href="#">The Name of the Product Goes here</a></dt> <dd> <p>The description of whatever the heading is about goes here. The description of whatever the heading is about goes here.The description of whatever the heading is about goes here.</p> </dd> </dl> </div> </div> </div>
/* box model hacks not catered for in the demo */ /* global reset for demo purposes only - use a proper reset in a real page*/ *{margin:0;padding:0} p{margin:0 0 .5em 0} h1{margin:1em 0;text-align:center} #catlist{ border:1px dashed #ccc; border-bottom:none; width:660px; margin:10px auto; } #catlist dl{ width:640px; margin:0 auto; border-bottom:1px dashed #ccc; padding:10px; overflow:hidden; background:#f2f2f2; } #catlist dd{overflow:auto} #catlist dt strong{ float:right; padding:0 0 0 20px; } #catlist dt img{ float:left; margin:0 10px 0 0; border:1px solid #000; } * html dd{height:1%}/* 3px jog*/

Related: See More


Questions / Comments: