<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>