--- /dev/null
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link href="../../../dist/css/bootstrap.min.css" rel="stylesheet">
+ <title>Form</title>
+ <style></style>
+ </head>
+ <body>
+ <main class="container py-5">
+ <div class="row gy-4 gx-5">
+ <h1 class="mt-5">Table variants</h1>
+ <div class="col-3">
+ <table class="table table-hover table-primary">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td class="table-active">Otto</td>
+ <td class="table-active">@mdo</td>
+ </tr>
+ <tr class="table-active">
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ <tr>
+ <th scope="row">4</th>
+ <td>Bootstrap</td>
+ <td>Twitter</td>
+ <td>@getbootstrap</td>
+ </tr>
+ <tr class="table-active">
+ <td colspan="4">
+ <table class="table mb-0">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="col-3">
+ <table class="table table-hover">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody class="table-primary">
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr class="table-active">
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ <tr>
+ <th scope="row">4</th>
+ <td>Bootstrap</td>
+ <td>Twitter</td>
+ <td>@getbootstrap</td>
+ </tr>
+ <tr>
+ <td class="table-active" colspan="4">
+ <table class="table mb-0">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="col-3">
+ <table class="table table-hover">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr class="table-primary">
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td class="table-active">Otto</td>
+ <td class="table-active">@mdo</td>
+ </tr>
+ <tr class="table-primary table-active">
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ <tr class="table-primary">
+ <th scope="row">4</th>
+ <td>Bootstrap</td>
+ <td>Twitter</td>
+ <td>@getbootstrap</td>
+ </tr>
+ <tr class="table-primary">
+ <td colspan="4">
+ <table class="table mb-0">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="col-3">
+ <table class="table table-hover">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td class="table-primary">Mark</td>
+ <td class="table-primary table-active">Otto</td>
+ <td class="table-active">@mdo</td>
+ </tr>
+ <tr class="table-active">
+ <th scope="row">2</th>
+ <td class="table-primary">Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td class="table-primary" colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ <tr>
+ <th scope="row">4</th>
+ <td class="table-primary">Bootstrap</td>
+ <td>Twitter</td>
+ <td>@getbootstrap</td>
+ </tr>
+ <tr>
+ <td class="table-primary" colspan="4">
+ <table class="table mb-0">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="col-3">
+ <table class="table table-hover table-striped table-primary">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td class="table-active">Otto</td>
+ <td class="table-active">@mdo</td>
+ </tr>
+ <tr class="table-active">
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ <tr>
+ <th scope="row">4</th>
+ <td>Bootstrap</td>
+ <td>Twitter</td>
+ <td>@getbootstrap</td>
+ </tr>
+ <tr class="table-active">
+ <td colspan="4">
+ <table class="table mb-0">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="col-3">
+ <table class="table table-hover table-striped">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody class="table-primary">
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td class="table-active">Otto</td>
+ <td class="table-active">@mdo</td>
+ </tr>
+ <tr class="table-active">
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ <tr>
+ <th scope="row">4</th>
+ <td>Bootstrap</td>
+ <td>Twitter</td>
+ <td>@getbootstrap</td>
+ </tr>
+ <tr>
+ <td class="table-active" colspan="4">
+ <table class="table mb-0">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="col-3">
+ <table class="table table-hover table-striped">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr class="table-primary">
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td class="table-active">Otto</td>
+ <td class="table-active">@mdo</td>
+ </tr>
+ <tr class="table-primary table-active">
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ <tr class="table-primary">
+ <th scope="row">4</th>
+ <td>Bootstrap</td>
+ <td>Twitter</td>
+ <td>@getbootstrap</td>
+ </tr>
+ <tr class="table-primary">
+ <td colspan="4">
+ <table class="table mb-0">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="col-3">
+ <table class="table table-hover table-striped">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td class="table-primary">Mark</td>
+ <td class="table-primary table-active">Otto</td>
+ <td class="table-active">@mdo</td>
+ </tr>
+ <tr class="table-active">
+ <th scope="row">2</th>
+ <td class="table-primary">Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td class="table-primary" colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ <tr>
+ <th scope="row">4</th>
+ <td class="table-primary">Bootstrap</td>
+ <td>Twitter</td>
+ <td>@getbootstrap</td>
+ </tr>
+ <tr>
+ <td class="table-primary" colspan="4">
+ <table class="table mb-0">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="col-3">
+ <table class="table table-hover table-striped table-primary">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody class="table-success">
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td class="table-active">Otto</td>
+ <td class="table-active">@mdo</td>
+ </tr>
+ <tr class="table-active">
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr class="table-warning">
+ <th scope="row">3</th>
+ <td colspan="2">Larry the Bird</td>
+ <td class="table-danger">@twitter</td>
+ </tr>
+ <tr>
+ <th scope="row">4</th>
+ <td>Bootstrap</td>
+ <td>Twitter</td>
+ <td>@getbootstrap</td>
+ </tr>
+ <tr class="table-warning table-active">
+ <td colspan="4">
+ <table class="table mb-0">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="col-3">
+ <table class="table table-hover table-striped">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody class="table-primary">
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td class="table-active">Otto</td>
+ <td class="table-active">@mdo</td>
+ </tr>
+ <tr class="table-active">
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr class="table-success">
+ <th scope="row">3</th>
+ <td colspan="2">Larry the Bird</td>
+ <td class="table-warning">@twitter</td>
+ </tr>
+ <tr>
+ <th scope="row">4</th>
+ <td>Bootstrap</td>
+ <td>Twitter</td>
+ <td>@getbootstrap</td>
+ </tr>
+ <tr class="table-success">
+ <td class="table-active" colspan="4">
+ <table class="table mb-0">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="col-3">
+ <table class="table table-hover table-striped">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr class="table-primary">
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td class="table-active">Otto</td>
+ <td class="table-active">@mdo</td>
+ </tr>
+ <tr class="table-primary table-active">
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td class="table-success">@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ <tr class="table-primary">
+ <th scope="row">4</th>
+ <td>Bootstrap</td>
+ <td>Twitter</td>
+ <td class="table-success">@getbootstrap</td>
+ </tr>
+ <tr class="table-primary">
+ <td colspan="4">
+ <table class="table mb-0">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="col-3">
+ <table class="table table-hover table-striped">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td class="table-primary">Mark</td>
+ <td class="table-primary table-active">Otto</td>
+ <td class="table-active">@mdo</td>
+ </tr>
+ <tr class="table-active">
+ <th scope="row">2</th>
+ <td class="table-primary">Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td class="table-primary" colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ <tr>
+ <th scope="row">4</th>
+ <td class="table-primary">Bootstrap</td>
+ <td>Twitter</td>
+ <td>@getbootstrap</td>
+ </tr>
+ <tr>
+ <td class="table-primary" colspan="4">
+ <table class="table mb-0">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+
+ <div class="row gy-4 gx-5">
+ <h1 class="mt-5">bg + text utilities</h1>
+ <div class="col-3">
+ <table class="table table-hover text-bg-primary">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td class="table-active">Otto</td>
+ <td class="table-active">@mdo</td>
+ </tr>
+ <tr class="table-active">
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ <tr>
+ <th scope="row">4</th>
+ <td>Bootstrap</td>
+ <td>Twitter</td>
+ <td>@getbootstrap</td>
+ </tr>
+ <tr class="table-active">
+ <td colspan="4">
+ <table class="table mb-0">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="col-3">
+ <table class="table table-hover">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody class="text-bg-primary">
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr class="table-active">
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ <tr>
+ <th scope="row">4</th>
+ <td>Bootstrap</td>
+ <td>Twitter</td>
+ <td>@getbootstrap</td>
+ </tr>
+ <tr>
+ <td class="table-active" colspan="4">
+ <table class="table mb-0">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="col-3">
+ <table class="table table-hover">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr class="text-bg-primary">
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td class="table-active">Otto</td>
+ <td class="table-active">@mdo</td>
+ </tr>
+ <tr class="text-bg-primary table-active">
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ <tr class="text-bg-primary">
+ <th scope="row">4</th>
+ <td>Bootstrap</td>
+ <td>Twitter</td>
+ <td>@getbootstrap</td>
+ </tr>
+ <tr class="text-bg-primary">
+ <td colspan="4">
+ <table class="table mb-0">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="col-3">
+ <table class="table table-hover">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td class="text-bg-primary">Mark</td>
+ <td class="text-bg-primary table-active">Otto</td>
+ <td class="table-active">@mdo</td>
+ </tr>
+ <tr class="table-active">
+ <th scope="row">2</th>
+ <td class="text-bg-primary">Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td class="text-bg-primary" colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ <tr>
+ <th scope="row">4</th>
+ <td class="text-bg-primary">Bootstrap</td>
+ <td>Twitter</td>
+ <td>@getbootstrap</td>
+ </tr>
+ <tr>
+ <td class="text-bg-primary" colspan="4">
+ <table class="table mb-0">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="col-3">
+ <table class="table table-hover table-striped text-bg-primary">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td class="table-active">Otto</td>
+ <td class="table-active">@mdo</td>
+ </tr>
+ <tr class="table-active">
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ <tr>
+ <th scope="row">4</th>
+ <td>Bootstrap</td>
+ <td>Twitter</td>
+ <td>@getbootstrap</td>
+ </tr>
+ <tr class="table-active">
+ <td colspan="4">
+ <table class="table mb-0">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="col-3">
+ <table class="table table-hover table-striped">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody class="text-bg-primary">
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td class="table-active">Otto</td>
+ <td class="table-active">@mdo</td>
+ </tr>
+ <tr class="table-active">
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ <tr>
+ <th scope="row">4</th>
+ <td>Bootstrap</td>
+ <td>Twitter</td>
+ <td>@getbootstrap</td>
+ </tr>
+ <tr>
+ <td class="table-active" colspan="4">
+ <table class="table mb-0">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="col-3">
+ <table class="table table-hover table-striped">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr class="text-bg-primary">
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td class="table-active">Otto</td>
+ <td class="table-active">@mdo</td>
+ </tr>
+ <tr class="text-bg-primary table-active">
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ <tr class="text-bg-primary">
+ <th scope="row">4</th>
+ <td>Bootstrap</td>
+ <td>Twitter</td>
+ <td>@getbootstrap</td>
+ </tr>
+ <tr class="text-bg-primary">
+ <td colspan="4">
+ <table class="table mb-0">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="col-3">
+ <table class="table table-hover table-striped">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td class="text-bg-primary">Mark</td>
+ <td class="text-bg-primary table-active">Otto</td>
+ <td class="table-active">@mdo</td>
+ </tr>
+ <tr class="table-active">
+ <th scope="row">2</th>
+ <td class="text-bg-primary">Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td class="text-bg-primary" colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ <tr>
+ <th scope="row">4</th>
+ <td class="text-bg-primary">Bootstrap</td>
+ <td>Twitter</td>
+ <td>@getbootstrap</td>
+ </tr>
+ <tr>
+ <td class="text-bg-primary" colspan="4">
+ <table class="table mb-0">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="col-3">
+ <table class="table table-hover table-striped text-bg-primary">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody class="text-bg-success">
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td class="table-active">Otto</td>
+ <td class="table-active">@mdo</td>
+ </tr>
+ <tr class="table-active">
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr class="text-bg-warning">
+ <th scope="row">3</th>
+ <td colspan="2">Larry the Bird</td>
+ <td class="text-bg-danger">@twitter</td>
+ </tr>
+ <tr>
+ <th scope="row">4</th>
+ <td>Bootstrap</td>
+ <td>Twitter</td>
+ <td>@getbootstrap</td>
+ </tr>
+ <tr class="text-bg-warning table-active">
+ <td colspan="4">
+ <table class="table mb-0">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="col-3">
+ <table class="table table-hover table-striped">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody class="text-bg-primary">
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td class="table-active">Otto</td>
+ <td class="table-active">@mdo</td>
+ </tr>
+ <tr class="table-active">
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr class="text-bg-success">
+ <th scope="row">3</th>
+ <td colspan="2">Larry the Bird</td>
+ <td class="text-bg-warning">@twitter</td>
+ </tr>
+ <tr>
+ <th scope="row">4</th>
+ <td>Bootstrap</td>
+ <td>Twitter</td>
+ <td>@getbootstrap</td>
+ </tr>
+ <tr class="text-bg-success">
+ <td class="table-active" colspan="4">
+ <table class="table mb-0">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="col-3">
+ <table class="table table-hover table-striped">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr class="text-bg-primary">
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td class="table-active">Otto</td>
+ <td class="table-active">@mdo</td>
+ </tr>
+ <tr class="text-bg-primary table-active">
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td class="text-bg-success">@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ <tr class="text-bg-primary">
+ <th scope="row">4</th>
+ <td>Bootstrap</td>
+ <td>Twitter</td>
+ <td class="text-bg-success">@getbootstrap</td>
+ </tr>
+ <tr class="text-bg-primary">
+ <td colspan="4">
+ <table class="table mb-0">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="col-3">
+ <table class="table table-hover table-striped">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td class="text-bg-primary">Mark</td>
+ <td class="text-bg-primary table-active">Otto</td>
+ <td class="table-active">@mdo</td>
+ </tr>
+ <tr class="table-active">
+ <th scope="row">2</th>
+ <td class="text-bg-primary">Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td class="text-bg-primary" colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ <tr>
+ <th scope="row">4</th>
+ <td class="text-bg-primary">Bootstrap</td>
+ <td>Twitter</td>
+ <td>@getbootstrap</td>
+ </tr>
+ <tr>
+ <td class="text-bg-primary" colspan="4">
+ <table class="table mb-0">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </main>
+
+ <script src="../../../dist/js/bootstrap.bundle.js"></script>
+ </body>
+</html>