designmodo responsive
HTML
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<div class="well">
Welcome ...! <br>
Get you timeline info ...
</div>
<div class= "c1">
<div class="row demo-row">
<div class="col-xs-3">
<a href="#fakelink" class="btn btn-block btn-lg btn-primary">Mention this month</a>
</div>
<div class="col-xs-3">
<a href="#fakelink" class="btn btn-block btn-lg btn-danger">Mention previous month</a>
</div>
<div class="col-xs-3">
<a href="#fakelink" class="btn btn-block btn-lg btn-success">Retweet this month</a>
</div>
<div class="col-xs-3">
<a href="#fakelink" class="btn btn-block btn-lg btn-info">Retweet previous month</a>
</div>
</div>
</div> <!-- /row -->
<table class="table table-condensed">
<thead>
<tr>
<th>Total</th>
<th>Mention reach</th>
<th>Retweet reach</th>
<th>Count of mention</th>
<th>Count of retwet</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>45</td>
<td>35</td>
<td>534</td>
<td>6343</td>
</tr>
</tbody>
</table>
<div class="row demo-row">
<h3 class="left">Twitter time line </h3>
<div class="col-xs-3 right">
<button type="button" class="btn btn-primary btn-xs clear">Export to CSV</button>
</div>
</div>
<table class="table table-condensed">
<thead>
<tr class="active">
<td class="active">Results</td>
<td class="success">Date</td>
<td class="warning">Time</td>
<td class="danger">Twitter user</td>
<td class="info">Reach</td>
<td class="active">Contant</td>
<td class="active">Tweet</td>
...
CSS
.c1
{
margin-top :10%;
}
.demo-row { width:100%; }
.right { float:right; }
.left { float:left; }
.clear { clear:both; }
.floating
{
float:left;
}