<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="list-group"> <div class="list-group-item clearfix"> <div class="profile-teaser-left"> <div class="profile-img"><img src="https://static.pexels.com/photos/21011/pexels-photo-large.jpg"/></div> </div> <div class="profile-teaser-main"> <h2 class="profile-name">Jane Doe</h2> <div class="profile-info"> <div class="info"><span class="">Info:</span> Something here</div> <div class="info"><span class="">Info:</span> Something here</div> <div class="info"><span class="">Info:</span> Something here</div> <div class="info"><span class="">Info:</span> Something here</div> </div> </div> </div><!-- item --> <div class="list-group-item clearfix"> <div class="profile-teaser-left"> <div class="profile-img"><img src="https://static.pexels.com/photos/21011/pexels-photo-large.jpg"/></div> </div> <div class="profile-teaser-main"> <h2 class="profile-name">Jane Doe</h2> <div class="profile-info"> <div class="info"><span class="">Info:</span> Something here</div> <div class="info"><span class="">Info:</span> Something here</div> <div class="info"><span class="">Info:</span> Something here</div> <div class="info"><span class="">Info:</span> Something here</div> </div> </div> </div><!-- item --> </div> </div> </div>

.profile-teaser-left { float: left; width: 20%; margin-right: 1%; } .profile-img img { width: 100%; height: auto; } .profile-teaser-main { float: left; width: 79%; } .info { display: inline-block; margin-right: 10px; color: #777; } .info span { font-weight: bold; }