HTML elements for timeline posts - html

Question

In an web application, i am displaying posts from other users in an individual user's homepage. Each post will contain the thumbnail profile picture of the person the post is from, their name on a paragraph, text contents and then a reply box and button. I am trying to do this by bootstrap's grid system but not achieving the desired effect. I want to mimic the tweets in twitter home page, but in my case there is a big gap in between the profile picture and the other column.
<div class="container" >
<ul id="newsfeed">
<li>
<div class="row">
<div class="col-sm-2">
<img src="someimage.png" class="img-thumbnail" alt="Some Image" width="60" height="60">
</div>
<div class="col-sm-4">
<p>9gag#9gag</p>
<p>This is me</p>
<p>twitted at 12:30pm GMT6+</p>
</div>
</div>
</li>
</ul>
</div>

Answer 1

Your .col-sm-2 is wider than your thumbnail image you can do two things.
1) You can can use .col-sm-1 for the image container.
<div class="container" >
<ul id="newsfeed">
<li>
<div class="row">
<div class="col-sm-1 narrow">
<img src="someimage.png" class="img-thumbnail" alt="Some Image" width="60" height="60">
</div>
<div class="col-sm-4 narrow">
<p>9gag#9gag</p>
<p>This is me</p>
<p>twitted at 12:30pm GMT6+</p>
</div>
</div>
</li>
</ul>
</div>
2) You can leave it as is but add bootstraps helper class pull-right to your img tag.
<div class="container" >
<ul id="newsfeed">
<li>
<div class="row">
<div class="col-sm-2">
<img src="someimage.png" class="img-thumbnail pull-right" alt="Some Image" width="60" height="60">
</div>
<div class="col-sm-4 narrow">
<p>9gag#9gag</p>
<p>This is me</p>
<p>twitted at 12:30pm GMT6+</p>
</div>
</div>
</li>
</ul>
</div>
CODEPEN DEMO

Answer 2

You could use the Media Object component for this (and possibly without any additional CSS as far as structure is concerned).
See working example Snippet.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="jumbotron">
<div class="container">
<h1>Posts</h1>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-offset-3 col-sm-6">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="http://placehold.it/75x75/000/fff" alt="...">
</a>
</div>
<div class="media-body">
<p>tweet#tweet</p>
<p>Some Tweet</p>
<p>twetted at 12:30pm GMT6+</p>
</div>
<form>
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="Reply..."> <span class="input-group-btn">
<button class="btn btn-default" type="button">Reply</button>
</span>
</div>
</form>
</div>
<div class="media">
<div class="media-body">
<p>tweet#tweet</p>
<p>Some Tweet</p>
<p>twetted at 12:30pm GMT6+</p>
</div>
<div class="media-right">
<a href="#">
<img class="media-object" src="http://placehold.it/75x75/f00/fff" alt="...">
</a>
</div>
<form>
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="Reply..."> <span class="input-group-btn">
<button class="btn btn-default" type="button">Reply</button>
</span>
</div>
</form>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="http://placehold.it/75x75/ff0/fff" alt="...">
</a>
</div>
<div class="media-body">
<p>tweet#tweet</p>
<p>Some Tweet</p>
<p>twetted at 12:30pm GMT6+</p>
</div>
<form>
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="Reply..."> <span class="input-group-btn">
<button class="btn btn-default" type="button">Reply</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>