Tables

Preview
HTML

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

                    
                      <!-- Table -->
                      <table class="table">
                        <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>
                      <!-- End Table -->

Preview
HTML

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

                    
                      <!-- Table -->
                      <table class="table table-dark">
                        <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>
                      <!-- End Table -->

Preview
HTML

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

                    
                      <!-- Table -->
                      <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>
                      <!-- End Table -->

Preview
HTML

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

                    
                      <!-- Table -->
                      <table class="table table-borderless table-thead-bordered">
                        <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>
                      <!-- End Table -->

Preview
HTML

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

                    
                      <!-- Table -->
                      <div class="div class="table-responsive"">
                        <table class="table table-nowrap">
                          <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>
                      <!-- End Table -->

Preview
HTML

#	First	Last	Handle
1	Mark Markus	Otto	@mdo
2	Jacob Jacy	Thornton	@fat
3	Larry Larry	the Bird	@twitter

                    
                      <!-- Table -->
                      <div class="div class="table-responsive"">
                        <table class="table table-align-middle">
                          <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<br>Markus</td>
                              <td>Otto</td>
                              <td>@mdo</td>
                            </tr>
                            <tr>
                              <th scope="row">2</th>
                              <td>Jacob<br>Jacy</td>
                              <td>Thornton</td>
                              <td>@fat</td>
                            </tr>
                            <tr>
                              <th scope="row">3</th>
                              <td>Larry<br>Larry</td>
                              <td>the Bird</td>
                              <td>@twitter</td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                      <!-- End Table -->

Preview
HTML

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

                    
                      <!-- Table -->
                      <div class="div class="table-responsive"">
                        <table class="table table-text-center">
                          <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>
                      <!-- End Table -->

Preview
HTML

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

                    
                      <!-- Table -->
                      <div class="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>
                            </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>
                      <!-- End Table -->

Preview
HTML

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

                    
                      <!-- Table -->
                      <div class="table-responsive">
                        <table class="table">
                          <thead>
                            <tr>
                              <th class="table-column-pr-0" scope="col">#</th>
                              <th class="table-column-pl-0" scope="col">First</th>
                              <th scope="col">Last</th>
                              <th scope="col">Handle</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <th class="table-column-pr-0" scope="row">1</th>
                              <td class="table-column-pl-0">Mark</td>
                              <td>Otto</td>
                              <td>@mdo</td>
                            </tr>
                            <tr>
                              <th class="table-column-pr-0" scope="row">2</th>
                              <td class="table-column-pl-0">Jacob</td>
                              <td>Thornton</td>
                              <td>@fat</td>
                            </tr>
                            <tr>
                              <th class="table-column-pr-0" scope="row">3</th>
                              <td class="table-column-pl-0">Larry</td>
                              <td>the Bird</td>
                              <td>@twitter</td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                      <!-- End Table -->

Preview
HTML

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

                    
                      <!-- Table -->
                      <table class="table table-sm">
                        <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>
                      <!-- End Table -->

Preview
HTML

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

                    
                      <!-- Table -->
                      <table class="table table-lg">
                        <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>
                      <!-- End Table -->

Preview
HTML

Users

Name	Position	Country	Status
Amanda Harvey amanda@example.com	Director Human resources	United Kingdom Code: GB	Active
A Anne Richard anne@example.com	Seller Branding products	United States Code: US	Pending
David Harrison david@example.com	Unknown Unknown	United States Code: US	Active
Finch Hoot finch@example.com	Designer IT department	Argentina Code: AR	Suspended
B Bob Dean bob@example.com	Executive director Marketing	Austria Code: AT	Active

                    
                      <!-- Card -->
                      <div class="card">
                        <div class="card-header">
                          <h4 class="card-header-title">Users</h4>
                        </div>

                        <!-- Table -->
                        <div class="table-responsive">
                          <table class="table table-lg table-borderless table-thead-bordered table-nowrap table-align-middle">
                            <thead class="thead-light">
                              <tr>
                                <th>Name</th>
                                <th>Position</th>
                                <th>Country</th>
                                <th>Status</th>
                                <th>Favorite</th>
                              </tr>
                            </thead>

                            <tbody>
                              <tr>
                                <td>
                                  <a class="media align-items-center" href="user-profile.html">
                                    <div class="avatar avatar-circle mr-3">
                                      <img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
                                    </div>
                                    <div class="media-body">
                                      <span class="d-block h5 text-hover-primary mb-0">Amanda Harvey <i class="tio-verified text-primary" data-toggle="tooltip" data-placement="top" title="Top endorsed"></i></span>
                                      <span class="d-block font-size-sm text-body">amanda@example.com</span>
                                    </div>
                                  </a>
                                </td>
                                <td>
                                  <span class="d-block h5 mb-0">Director</span>
                                  <span class="d-block font-size-sm">Human resources</span>
                                </td>
                                <td>United Kingdom <span class="text-hide">Code: GB</span></td>
                                <td>
                                  <span class="legend-indicator bg-success"></span>Active
                                </td>
                                <td class="text-center">
                                  <div class="custom-control custom-checkbox-bookmark">
                                    <input type="checkbox" id="favoriteCheckbox1" class="custom-control-input custom-checkbox-bookmark-input">
                                    <label class="custom-checkbox-bookmark-label" for="favoriteCheckbox1">
                                      <span class="custom-checkbox-bookmark-default">
                                        <i class="tio-star-outlined"></i>
                                      </span>
                                      <span class="custom-checkbox-bookmark-active">
                                        <i class="tio-star"></i>
                                      </span>
                                    </label>
                                  </div>
                                </td>
                              </tr>

                              <tr>
                                <td>
                                  <a class="media align-items-center" href="user-profile.html">
                                    <div class="avatar avatar-soft-primary avatar-circle mr-3">
                                      <span class="avatar-initials">A</span>
                                    </div>
                                    <div class="media-body">
                                      <span class="d-block h5 text-hover-primary mb-0">Anne Richard</span>
                                      <span class="d-block font-size-sm text-body">anne@example.com</span>
                                    </div>
                                  </a>
                                </td>
                                <td>
                                  <span class="d-block h5 mb-0">Seller</span>
                                  <span class="d-block font-size-sm">Branding products</span>
                                </td>
                                <td>United States <span class="text-hide">Code: US</span></td>
                                <td>
                                  <span class="legend-indicator bg-warning"></span>Pending
                                </td>
                                <td class="text-center">
                                  <div class="custom-control custom-checkbox-bookmark">
                                    <input type="checkbox" id="favoriteCheckbox2" class="custom-control-input custom-checkbox-bookmark-input" checked>
                                    <label class="custom-checkbox-bookmark-label" for="favoriteCheckbox2">
                                      <span class="custom-checkbox-bookmark-default">
                                        <i class="tio-star-outlined"></i>
                                      </span>
                                      <span class="custom-checkbox-bookmark-active">
                                        <i class="tio-star"></i>
                                      </span>
                                    </label>
                                  </div>
                                </td>
                              </tr>

                              <tr>
                                <td>
                                  <a class="media align-items-center" href="user-profile.html">
                                    <div class="avatar avatar-circle mr-3">
                                      <img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
                                    </div>
                                    <div class="media-body">
                                      <span class="d-block h5 text-hover-primary mb-0">David Harrison</span>
                                      <span class="d-block font-size-sm text-body">david@example.com</span>
                                    </div>
                                  </a>
                                </td>
                                <td>
                                  <span class="d-block h5 mb-0">Unknown</span>
                                  <span class="d-block font-size-sm">Unknown</span>
                                </td>
                                <td>United States <span class="text-hide">Code: US</span></td>
                                <td>
                                  <span class="legend-indicator bg-success"></span>Active
                                </td>
                                <td class="text-center">
                                  <div class="custom-control custom-checkbox-bookmark">
                                    <input type="checkbox" id="favoriteCheckbox3" class="custom-control-input custom-checkbox-bookmark-input" checked>
                                    <label class="custom-checkbox-bookmark-label" for="favoriteCheckbox3">
                                      <span class="custom-checkbox-bookmark-default">
                                        <i class="tio-star-outlined"></i>
                                      </span>
                                      <span class="custom-checkbox-bookmark-active">
                                        <i class="tio-star"></i>
                                      </span>
                                    </label>
                                  </div>
                                </td>
                              </tr>

                              <tr>
                                <td>
                                  <a class="media align-items-center" href="user-profile.html">
                                    <div class="avatar avatar-circle mr-3">
                                      <img class="avatar-img" src="../assets/img/160x160/img5.jpg" alt="Image Description">
                                    </div>
                                    <div class="media-body">
                                      <span class="d-block h5 text-hover-primary mb-0">Finch Hoot</span>
                                      <span class="d-block font-size-sm text-body">finch@example.com</span>
                                    </div>
                                  </a>
                                </td>
                                <td>
                                  <span class="d-block h5 mb-0">Designer</span>
                                  <span class="d-block font-size-sm">IT department</span>
                                </td>
                                <td>Argentina <span class="text-hide">Code: AR</span></td>
                                <td>
                                  <span class="legend-indicator bg-danger"></span>Suspended
                                </td>
                                <td class="text-center">
                                  <div class="custom-control custom-checkbox-bookmark">
                                    <input type="checkbox" id="favoriteCheckbox4" class="custom-control-input custom-checkbox-bookmark-input">
                                    <label class="custom-checkbox-bookmark-label" for="favoriteCheckbox4">
                                      <span class="custom-checkbox-bookmark-default">
                                        <i class="tio-star-outlined"></i>
                                      </span>
                                      <span class="custom-checkbox-bookmark-active">
                                        <i class="tio-star"></i>
                                      </span>
                                    </label>
                                  </div>
                                </td>
                              </tr>

                              <tr>
                                <td>
                                  <a class="media align-items-center" href="user-profile.html">
                                    <div class="avatar avatar-soft-dark avatar-circle mr-3">
                                      <span class="avatar-initials">B</span>
                                    </div>
                                    <div class="media-body">
                                      <span class="d-block h5 text-hover-primary mb-0">Bob Dean</span>
                                      <span class="d-block font-size-sm text-body">bob@example.com</span>
                                    </div>
                                  </a>
                                </td>
                                <td>
                                  <span class="d-block h5 mb-0">Executive director</span>
                                  <span class="d-block font-size-sm">Marketing</span>
                                </td>
                                <td>Austria <span class="text-hide">Code: AT</span></td>
                                <td>
                                  <span class="legend-indicator bg-success"></span>Active
                                </td>
                                <td class="text-center">
                                  <div class="custom-control custom-checkbox-bookmark">
                                    <input type="checkbox" id="favoriteCheckbox5" class="custom-control-input custom-checkbox-bookmark-input" checked>
                                    <label class="custom-checkbox-bookmark-label" for="favoriteCheckbox5">
                                      <span class="custom-checkbox-bookmark-default">
                                        <i class="tio-star-outlined"></i>
                                      </span>
                                      <span class="custom-checkbox-bookmark-active">
                                        <i class="tio-star"></i>
                                      </span>
                                    </label>
                                  </div>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                        <!-- End Table -->
                      </div>
                      <!-- End Card -->

Class	Description
`.table-input-group`	Adds `min-width: 14rem;` to an `input-group` Example: API Keys.
`.table-progress`	Replaces the default width and heights. Example: Table of the main chart Dashboard alternative.

Examples

Sizes

Bookmarked checkbox

Users

Other classes to note