GitBucket
<div class="row">
<!-- column -->
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<h4 class="card-title">Basic Table</h4>
<h6 class="card-subtitle">Add class
<code>.table</code>
</h6>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Deshmukh</td>
<td>Prohaska</td>
<td>@Genelia</td>
<td>
<span class="label label-danger">admin</span>
</td>
</tr>
<tr>
<td>2</td>
<td>Deshmukh</td>
<td>Gaylord</td>
<td>@Ritesh</td>
<td>
<span class="label label-info">member</span>
</td>
</tr>
<tr>
<td>3</td>
<td>Sanghani</td>
<td>Gusikowski</td>
<td>@Govinda</td>
<td>
<span class="label label-warning">developer</span>
</td>
</tr>
<tr>
<td>4</td>
<td>Roshan</td>
<td>Rogahn</td>
<td>@Hritik</td>
<td>
<span class="label label-success">supporter</span>
</td>
</tr>
<tr>
<td>5</td>
<td>Joshi</td>
<td>Hickle</td>
<td>@Maruti</td>
<td>
<span class="label label-info">member</span>
</td>
</tr>
<tr>
<td>6</td>
<td>Nigam</td>
<td>Eichmann</td>
<td>@Sonu</td>
<td>
<span class="label label-success">supporter</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- column -->
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="card-title">Bordered Table</h4>
<h6 class="card-subtitle">Add
<code>.table-bordered</code>for borders on all sides of the table and cells.</h6>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Task</th>
<th>Progress</th>
<th>Deadline</th>
<th class="text-nowrap">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lunar probe project</td>
<td>
<div class="progress progress-xs margin-vertical-10 ">
<div class="progress-bar bg-danger" style="width: 35%; height:6px;"></div>
</div>
</td>
<td>May 15, 2015</td>
<td class="text-nowrap">
active
</td>
</tr>
<tr>
<td>Dream successful plan</td>
<td>
<div class="progress progress-xs margin-vertical-10 ">
<div class="progress-bar bg-warning" style="width: 50%; height:6px;"></div>
</div>
</td>
<td>July 1, 2015</td>
<td class="text-nowrap">
active
</td>
</tr>
<tr>
<td>Office automatization</td>
<td>
<div class="progress progress-xs margin-vertical-10 ">
<div class="progress-bar bg-success" style="width: 100%; height:6px;"></div>
</div>
</td>
<td>Apr 12, 2015</td>
<td class="text-nowrap">
inactive
</td>
</tr>
<tr>
<td>The sun climbing plan</td>
<td>
<div class="progress progress-xs margin-vertical-10 ">
<div class="progress-bar bg-primary" style="width: 70%; height:6px;"></div>
</div>
</td>
<td>Aug 9, 2015</td>
<td class="text-nowrap">
active
</td>
</tr>
<tr>
<td>Open strategy</td>
<td>
<div class="progress progress-xs margin-vertical-10 ">
<div class="progress-bar bg-info" style="width: 85%; height:6px;"></div>
</div>
</td>
<td>Apr 2, 2015</td>
<td class="text-nowrap">
active
</td>
</tr>
<tr>
<td>Tantas earum numeris</td>
<td>
<div class="progress progress-xs margin-vertical-10 ">
<div class="progress-bar bg-inverse" style="width: 50%; height:6px;"></div>
</div>
</td>
<td>July 11, 2015</td>
<td class="text-nowrap">
inactive
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- column -->
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="card-title">Striped Table</h4>
<h6 class="card-subtitle">Add
<code>.table-striped</code>for borders on all sides of the table and cells.</h6>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Task</th>
<th>Progress</th>
<th>Deadline</th>
<th class="text-nowrap">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lunar probe project</td>
<td>
<div class="progress progress-xs margin-vertical-10 ">
<div class="progress-bar bg-danger" style="width: 35% ;height:6px;"></div>
</div>
</td>
<td>May 15, 2015</td>
<td class="text-nowrap">
inactive
</td>
</tr>
<tr>
<td>Dream successful plan</td>
<td>
<div class="progress progress-xs margin-vertical-10 ">
<div class="progress-bar bg-warning" style="width: 50%; height:6px;"></div>
</div>
</td>
<td>July 1, 2015</td>
<td class="text-nowrap">
active
</td>
</tr>
<tr>
<td>Office automatization</td>
<td>
<div class="progress progress-xs margin-vertical-10 ">
<div class="progress-bar bg-success" style="width: 100%; height:6px;"></div>
</div>
</td>
<td>Apr 12, 2015</td>
<td class="text-nowrap">
inactive
</td>
</tr>
<tr>
<td>The sun climbing plan</td>
<td>
<div class="progress progress-xs margin-vertical-10 ">
<div class="progress-bar bg-primary" style="width: 70%; height:6px;"></div>
</div>
</td>
<td>Aug 9, 2015</td>
<td class="text-nowrap">
active
</td>
</tr>
<tr>
<td>Open strategy</td>
<td>
<div class="progress progress-xs margin-vertical-10 ">
<div class="progress-bar bg-info" style="width: 85%; height:6px;"></div>
</div>
</td>
<td>Apr 2, 2015</td>
<td class="text-nowrap">
active
</td>
</tr>
<tr>
<td>Tantas earum numeris</td>
<td>
<div class="progress progress-xs margin-vertical-10 ">
<div class="progress-bar bg-inverse" style="width: 50%; height:6px;"></div>
</div>
</td>
<td>July 11, 2015</td>
<td class="text-nowrap">
inactive
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- column -->
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="card-title">Responsive Table </h4>
<h6 class="card-subtitle">Create responsive tables by wrapping any
<code>.table</code> in
<code>.table-responsive </code>
</h6>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Invoice</th>
<th>User</th>
<th>Date</th>
<th>Amount</th>
<th>Status</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="javascript:void(0)">Order #26589</a>
</td>
<td>Herman Beck</td>
<td>
<span class="text-muted">
<i class="fa fa-clock-o"></i> Oct 16, 2017</span>
</td>
<td>$45.00</td>
<td>
<div class="label label-table label-success">Paid</div>
</td>
<td>EN</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)">Order #58746</a>
</td>
<td>Mary Adams</td>
<td>
<span class="text-muted">
<i class="fa fa-clock-o"></i> Oct 12, 2017</span>
</td>
<td>$245.30</td>
<td>
<div class="label label-table label-danger">Shipped</div>
</td>
<td>CN</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)">Order #98458</a>
</td>
<td>Caleb Richards</td>
<td>
<span class="text-muted">
<i class="fa fa-clock-o"></i> May 18, 2017</span>
</td>
<td>$38.00</td>
<td>
<div class="label label-table label-info">Shipped</div>
</td>
<td>AU</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)">Order #32658</a>
</td>
<td>June Lane</td>
<td>
<span class="text-muted">
<i class="fa fa-clock-o"></i> Apr 28, 2017</span>
</td>
<td>$77.99</td>
<td>
<div class="label label-table label-success">Paid</div>
</td>
<td>FR</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- column -->
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="card-title">Contextual Classes</h4>
<h6 class="card-subtitle">Use classes
<code>( .table-active, .table-success, .table-info, .table-warning, .table-danger )</code> to color table rows or individual cells</h6>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<td scope="row">1</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-success">
<td scope="row">2</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-info">
<td scope="row">3</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-warning">
<td scope="row">4</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-danger">
<td scope="row">5</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>