"Blog Post List with photo"
Bootstrap 3.2.0 Snippet by cathyloosvelt

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css"/> <div class="container"> <div class="well"> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" width="250" src="http://www.odeaanaude.eu/catalogaude2/images/montolieu76.jpg"> </a> <div class="media-body"> <h4 class="media-heading">Truffeldegustatie</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.</p> <ul class="list-inline list-unstyled"> <li><span><i class="glyphicon glyphicon-calendar"></i> 28 oktober 2015 </span></li> <li>|</li> <li><span><i class="glyphicon glyphicon-clock"></i> 18:00</span></li> </ul> </div> </div> </div> <div class="well"> <div class="media"> <a class="pull-right" href="#"> <img class="media-object" width="250" src="http://www.odeaanaude.eu/catalogaude2/images/montolieu76.jpg"> </a> <div class="media-body"> <h4 class="media-heading">Receta 2</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.</p> <ul class="list-inline list-unstyled"> <li><span><i class="glyphicon glyphicon-calendar"></i> 2 days, 8 hours </span></li> </ul> </div> </div> </div> </div>
.media>.pull-left { margin-right: 20px; }

Related: See More


Questions / Comments: