Bootstrap 3 Template
This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<div class="container">
<table id="myTable" data-toggle="table" data-detail-view="true" data-show-columns="true" data-icons="icons" data-icons-prefix="fa" data-show-refresh="true" data-show-toggle="true">
<thead>
<tr>
<th>Column A</th>
<th data-sortable="true">Column B</th>
<th>Column C</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>abcd <i class="fa fa-minus-square"></i></td>
<td>other content</td>
<!-- id number is generated by tt_template --> <span style="display: none;" id="desc0">
<strong class="bold">Description:</strong>
<br>
<pre>This is row with id=0, containing other content</pre>
</span>
</tr>
<tr>
<td>2</td>
<td>efgh</td>
<td>another content</td>
<!-- id number is generated by tt_template --> <span style="display: none;" id="desc1">
<a href="#" data-toggle="collapse" data-target="#z1"><strong class="bold">Description:</strong></a>
<br>
<div id="z1" class="collapse"><pre>This is row with id=1, containing another content</pre></div>
</span>
</tr>
</tbody>
</table>
</div>
CSS
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
/*@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');*/
body {
margin: 10px;
}
JavaScript
/* Latest compiled and minified JavaScript included as External Resource */
window.icons = {
refresh: 'fa-refresh',
toggle: 'fa-toggle-on fa-lg',
columns: 'glyphicon-minus icon-minus',
detailOpen: 'fa-plus-square',
detailClose: 'fa-minus-square'
};