<div class="table-responsive">  <table class="table">    <thead>      <tr>        <th scope="col">#</th>        <th scope="col">First</th>        <th scope="col">Last</th>        <th scope="col">Handle</th>        <th class="text-right" scope="col">Action</th>      </tr>    </thead>    <tbody>      <tr>        <th scope="row">1</th>        <td>Mark</td>        <td>Otto</td>        <td>@mdo</td>        <td class="text-right">          <div class="dropdown">            <a href="#" class="btn btn-sm"               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">              <i class="fa fa-ellipsis-v" aria-hidden="true"></i>            </a>            <div class="dropdown-menu dropdown-menu-right">              <button class="dropdown-item" type="button">Action</button>              <button class="dropdown-item" type="button">Another action</button>              <button class="dropdown-item" type="button">Something else here</button>            </div>          </div>        </td>      </tr>      <tr>        <th scope="row">2</th>        <td>Jacob</td>        <td>Thornton</td>        <td>@fat</td>        <td class="text-right">          <div class="dropdown">            <a href="#" class="btn btn-sm"               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">              <i class="fa fa-ellipsis-v" aria-hidden="true"></i>            </a>            <div class="dropdown-menu dropdown-menu-right">              <button class="dropdown-item" type="button">Action</button>              <button class="dropdown-item" type="button">Another action</button>              <button class="dropdown-item" type="button">Something else here</button>            </div>          </div>        </td>      </tr>      <tr>        <th scope="row">3</th>        <td>Larry</td>        <td>the Bird</td>        <td>@twitter</td>        <td class="text-right">          <div class="dropdown">            <a href="#" class="btn btn-sm"               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">              <i class="fa fa-ellipsis-v" aria-hidden="true"></i>            </a>            <div class="dropdown-menu dropdown-menu-right">              <button class="dropdown-item" type="button">Action</button>              <button class="dropdown-item" type="button">Another action</button>              <button class="dropdown-item" type="button">Something else here</button>            </div>          </div>        </td>      </tr>    </tbody>  </table></div>

<div class="table-responsive">    <table class="table">        <thead>        <tr>            <th scope="col">#</th>            <th scope="col">Avatar</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>            <th>                <figure class="avatar avatar-sm">                    <img src="assets/media/image/user/women_avatar5.jpg" class="rounded-circle" alt="image">                </figure>            </th>            <td>Jessie</td>            <td>Otto</td>            <td>@mdo</td>        </tr>        <tr>            <th scope="row">2</th>            <th>                <figure class="avatar avatar-sm">                    <a href="#">                        <span class="avatar-title bg-info rounded-circle">J</span>                    </a>                </figure>            </th>            <td>Jacob</td>            <td>Thornton</td>            <td>@fat</td>        </tr>        <tr>            <th scope="row">3</th>            <th>                <figure class="avatar avatar-sm">                    <img src="assets/media/image/user/man_avatar5.jpg" class="rounded-circle" alt="image">                </figure>            </th>            <td>Larry</td>            <td>the Bird</td>            <td>@twitter</td>        </tr>        <tr>            <th scope="row">2</th>            <th>                <figure class="avatar avatar-sm">                    <a href="#">                        <span class="avatar-title bg-warning rounded-circle">M</span>                    </a>                </figure>            </th>            <td>Mark</td>            <td>Thornton</td>            <td>@fat</td>        </tr>        </tbody>    </table></div>

<div class="table-responsive">    <table class="table">        <thead>        <tr>            <th scope="col">#</th>            <th scope="col">Avatar</th>            <th scope="col">First</th>            <th scope="col">Last</th>            <th scope="col">Status</th>        </tr>        </thead>        <tbody>        <tr>            <th scope="row">1</th>            <th>                <figure class="avatar avatar-sm">                    <img src="assets/media/image/user/women_avatar5.jpg" class="rounded-circle" alt="image">                </figure>            </th>            <td>Jessie</td>            <td>Otto</td>            <td>                <span class="badge badge-success">Active</span>            </td>        </tr>        <tr>            <th scope="row">2</th>            <th>                <figure class="avatar avatar-sm">                    <a href="#">                        <span class="avatar-title bg-primary rounded-circle">M</span>                    </a>                </figure>            </th>            <td>Morn</td>            <td>Thornton</td>            <td>                <span class="badge badge-danger">Passive</span>            </td>        </tr>        <tr>            <th scope="row">3</th>            <th>                <figure class="avatar avatar-sm">                    <img src="assets/media/image/user/man_avatar5.jpg" class="rounded-circle" alt="image">                </figure>            </th>            <td>Larry</td>            <td>the Bird</td>            <td>                <span class="badge badge-warning">Pending</span>            </td>        </tr>        </tbody>    </table></div>

<div class="table-responsive">  <table class="table 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>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>      <tr>        <th scope="row">3</th>        <td>Larry</td>        <td>the Bird</td>        <td>@twitter</td>      </tr>    </tbody>  </table></div>

<div class="table-responsive">  <table class="table table-bordered">    <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>      <tr>        <th scope="row">3</th>        <td>Larry</td>        <td>the Bird</td>        <td>@twitter</td>      </tr>    </tbody>  </table></div>

<div class="table-responsive">  <table class="table table-borderless">    <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>      <tr>        <th scope="row">3</th>        <td>Larry</td>        <td>the Bird</td>        <td>@twitter</td>      </tr>    </tbody>  </table></div>

<div class="table-responsive">  <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>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>      <tr>        <th scope="row">3</th>        <td>Larry</td>        <td>the Bird</td>        <td>@twitter</td>      </tr>    </tbody>  </table></div>

<div class="table-responsive">  <table class="table table-small">    <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>      <tr>        <th scope="row">3</th>        <td>Larry</td>        <td>the Bird</td>        <td>@twitter</td>      </tr>    </tbody>  </table></div>

<div class="table-responsive">  <table class="table">    <thead class="thead-dark">      <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>      <tr>        <th scope="row">3</th>        <td>Larry</td>        <td>the Bird</td>        <td>@twitter</td>      </tr>    </tbody>  </table></div><div class="table-responsive">  <table class="table">    <thead class="thead-light">      <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>      <tr>        <th scope="row">3</th>        <td>Larry</td>        <td>the Bird</td>        <td>@twitter</td>      </tr>    </tbody>  </table></div>

<div class="table-responsive">  <table class="table">    <thead>      <tr>        <th scope="col">Class</th>        <th scope="col">Heading</th>        <th scope="col">Heading</th>      </tr>    </thead>    <tbody>      <tr class="table-active">        <th scope="row">Active</th>        <td>Cell</td>        <td>Cell</td>      </tr>      <tr>        <th scope="row">Default</th>        <td>Cell</td>        <td>Cell</td>      </tr>      <tr class="table-primary">        <th scope="row">Primary</th>        <td>Cell</td>        <td>Cell</td>      </tr>      <tr class="table-secondary">        <th scope="row">Secondary</th>        <td>Cell</td>        <td>Cell</td>      </tr>      <tr class="table-success">        <th scope="row">Success</th>        <td>Cell</td>        <td>Cell</td>      </tr>      <tr class="table-danger">        <th scope="row">Danger</th>        <td>Cell</td>        <td>Cell</td>      </tr>      <tr class="table-warning">        <th scope="row">Warning</th>        <td>Cell</td>        <td>Cell</td>      </tr>      <tr class="table-info">        <th scope="row">Info</th>        <td>Cell</td>        <td>Cell</td>      </tr>      <tr class="table-light">        <th scope="row">Light</th>        <td>Cell</td>        <td>Cell</td>      </tr>      <tr class="table-dark">        <th scope="row">Dark</th>        <td>Cell</td>        <td>Cell</td>      </tr>    </tbody>  </table></div>

<div class="table-responsive">  <table class="table table-dark">    <thead>      <tr>        <th scope="col">#</th>        <th scope="col">Heading</th>        <th scope="col">Heading</th>      </tr>    </thead>    <tbody>      <tr class="bg-primary">        <th scope="row">1</th>        <td>Cell</td>        <td>Cell</td>      </tr>      <tr>        <th scope="row">2</th>        <td>Cell</td>        <td>Cell</td>      </tr>      <tr class="bg-success">        <th scope="row">3</th>        <td>Cell</td>        <td>Cell</td>      </tr>      <tr>        <th scope="row">4</th>        <td>Cell</td>        <td>Cell</td>      </tr>      <tr class="bg-info">        <th scope="row">5</th>        <td>Cell</td>        <td>Cell</td>      </tr>      <tr>        <th scope="row">6</th>        <td>Cell</td>        <td>Cell</td>      </tr>      <tr class="bg-warning">        <th scope="row">7</th>        <td>Cell</td>        <td>Cell</td>      </tr>      <tr>        <th scope="row">8</th>        <td>Cell</td>        <td>Cell</td>      </tr>      <tr class="bg-danger">        <th scope="row">9</th>        <td>Cell</td>        <td>Cell</td>      </tr>    </tbody>  </table></div>

<div class="table-responsive">  <table class="table">    <caption>List of users</caption>    <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>      <tr>        <th scope="row">3</th>        <td>Larry</td>        <td>the Bird</td>        <td>@twitter</td>      </tr>    </tbody>  </table></div>