"product & thumbnail list"
Bootstrap 3.1.0 Snippet by peterxp

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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> <ul> <li> <img src="http://lorempixum.com/100/100/nature/1"> <h3>Headline</h3> <p>Lorem ipsum dolor sit amet...</p> </li> <li> <img src="http://lorempixum.com/100/100/nature/2"> <h3>Headline</h3> <p>Lorem ipsum dolor sit amet...</p> </li> <li> <img src="http://lorempixum.com/100/100/nature/3"> <h3>Headline</h3> <p>Lorem ipsum dolor sit amet...</p> </li> <li> <img src="http://lorempixum.com/100/100/nature/4"> <h3>Headline</h3> <p>Lorem ipsum dolor sit amet...</p> </li> </ul> </div> </div> </div>
* {margin: 0; padding: 0;} h1, .h1, h2, .h2, h3, .h3 { margin-top: 0px; margin-bottom: 0px; } div { margin: 20px; } ul { list-style-type: none; width: 320px; } h3 { font: bold 20px/1.5 Helvetica, Verdana, sans-serif; } li img { float: left; margin: 0 15px 0 0; } li p { font: 200 12px/1.5 Georgia, Times New Roman, serif; } li { padding: 10px; overflow: auto; } li:hover { background: #eee; cursor: pointer; }

Related: See More


Questions / Comments: