Basic Tables

Basic example

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

Name Phone Number Date of Birth Active?
Risa D. Pearson 336-508-2157 July 24, 1950
Ann C. Thompson 646-473-2057 January 25, 1959
Paul J. Friend 281-308-0793 September 1, 1939
Linda G. Smith 606-253-1207 May 3, 1962
                                                    
                                                        <table class="table table-centered mb-0">
                                                            <thead>
                                                                <tr>
                                                                    <th>Name</th>
                                                                    <th>Phone Number</th>
                                                                    <th>Date of Birth</th>
                                                                    <th>Active?</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr>
                                                                    <td>Risa D. Pearson</td>
                                                                    <td>336-508-2157</td>
                                                                    <td>July 24, 1950</td>
                                                                    <td>
                                                                        <!-- Switch-->
                                                                        <div>
                                                                            <input type="checkbox" id="switch01" checked data-switch="success"/>
                                                                            <label for="switch01" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Ann C. Thompson</td>
                                                                    <td>646-473-2057</td>
                                                                    <td>January 25, 1959</td>
                                                                    <td>
                                                                        <!-- Switch-->
                                                                        <div>
                                                                            <input type="checkbox" id="switch02" checked data-switch="success"/>
                                                                            <label for="switch02" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Paul J. Friend</td>
                                                                    <td>281-308-0793</td>
                                                                    <td>September 1, 1939</td>
                                                                    <td>
                                                                        <!-- Switch-->
                                                                        <div>
                                                                            <input type="checkbox" id="switch03" data-switch="success"/>
                                                                            <label for="switch03" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Linda G. Smith</td>
                                                                    <td>606-253-1207</td>
                                                                    <td>May 3, 1962</td>
                                                                    <td>
                                                                        <!-- Switch-->
                                                                        <div>
                                                                            <input type="checkbox" id="switch04" data-switch="success"/>
                                                                            <label for="switch04" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    
                                                

Inverse table

You can also invert the colors—with light text on dark backgrounds—with .table-dark.

Name Phone Number Date of Birth Active?
Risa D. Pearson 336-508-2157 July 24, 1950
Ann C. Thompson 646-473-2057 January 25, 1959
Paul J. Friend 281-308-0793 September 1, 1939
Sean C. Nguyen 269-714-6825 February 5, 1994
                                                    
                                                        <table class="table table-dark mb-0">
                                                            <thead>
                                                                <tr>
                                                                    <th>Name</th>
                                                                    <th>Phone Number</th>
                                                                    <th>Date of Birth</th>
                                                                    <th>Active?</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr>
                                                                    <td>Risa D. Pearson</td>
                                                                    <td>336-508-2157</td>
                                                                    <td>July 24, 1950</td>
                                                                    <td>
                                                                        <!-- Switch-->
                                                                        <div>
                                                                            <input type="checkbox" id="switch6" data-switch="success"/>
                                                                            <label for="switch6" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Ann C. Thompson</td>
                                                                    <td>646-473-2057</td>
                                                                    <td>January 25, 1959</td>
                                                                    <td>
                                                                        <!-- Switch-->
                                                                        <div>
                                                                            <input type="checkbox" id="switch7" checked data-switch="success"/>
                                                                            <label for="switch7" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Paul J. Friend</td>
                                                                    <td>281-308-0793</td>
                                                                    <td>September 1, 1939</td>
                                                                    <td>
                                                                        <!-- Switch-->
                                                                        <div>
                                                                            <input type="checkbox" id="switch8" data-switch="success"/>
                                                                            <label for="switch8" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Sean C. Nguyen</td>
                                                                    <td>269-714-6825</td>
                                                                    <td>February 5, 1994</td>
                                                                    <td>
                                                                        <!-- Switch-->
                                                                        <div>
                                                                            <input type="checkbox" id="switch10" checked data-switch="success"/>
                                                                            <label for="switch10" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    
                                                

Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

User Account No. Balance Action
table-user Risa D. Pearson AC336 508 2157 July 24, 1950
table-user Ann C. Thompson SB646 473 2057 January 25, 1959
table-user Paul J. Friend DL281 308 0793 September 1, 1939
table-user Sean C. Nguyen CA269 714 6825 February 5, 1994
                                                    
                                                        <table class="table table-striped table-centered mb-0">
                                                            <thead>
                                                                <tr>
                                                                    <th>User</th>
                                                                    <th>Account No.</th>
                                                                    <th>Balance</th>
                                                                    <th>Action</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr>
                                                                    <td class="table-user">
                                                                        <img src="assets/images/users/avatar-2.jpg" alt="table-user" class="me-2 rounded-circle" />
                                                                        Risa D. Pearson
                                                                    </td>
                                                                    <td>AC336 508 2157</td>
                                                                    <td>July 24, 1950</td>
                                                                    <td class="table-action">
                                                                        <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-pencil"></i></a>
                                                                        <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="table-user">
                                                                        <img src="assets/images/users/avatar-3.jpg" alt="table-user" class="me-2 rounded-circle" />
                                                                        Ann C. Thompson
                                                                    </td>
                                                                    <td>SB646 473 2057</td>
                                                                    <td>January 25, 1959</td>
                                                                    <td class="table-action">
                                                                        <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-pencil"></i></a>
                                                                        <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="table-user">
                                                                        <img src="assets/images/users/avatar-4.jpg" alt="table-user" class="me-2 rounded-circle" />
                                                                        Paul J. Friend
                                                                    </td>
                                                                    <td>DL281 308 0793</td>
                                                                    <td>September 1, 1939</td>
                                                                    <td class="table-action">
                                                                        <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-pencil"></i></a>
                                                                        <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="table-user">
                                                                        <img src="assets/images/users/avatar-5.jpg" alt="table-user" class="me-2 rounded-circle" />
                                                                        Sean C. Nguyen
                                                                    </td>
                                                                    <td>CA269 714 6825</td>
                                                                    <td>February 5, 1994</td>
                                                                    <td class="table-action">
                                                                        <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-pencil"></i></a>
                                                                        <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    
                                                

Table head options

Use one of two modifier classes to make <thead>s appear light or dark gray.

Product Courier Process Status
ASOS Ridley High Waist FedEx
Delivered
Marco Lightweight Shirt DHL
Shipped
Half Sleeve Shirt Bright
Order Received
Lightweight Jacket FedEx
Delivered
                                                    
                                                        <table class="table table-centered mb-0">
                                                            <thead class="table-dark">
                                                                <tr>
                                                                    <th>Product</th>
                                                                    <th>Courier</th>
                                                                    <th>Process</th>
                                                                    <th>Status</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr>
                                                                    <td>ASOS Ridley High Waist</td>
                                                                    <td>FedEx</td>
                                                                    <td>
                                                                        <div class="progress progress-sm">
                                                                            <div class="progress-bar progress-lg bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                                                        </div>
                                                                    </td>
                                                                    <td><i class="mdi mdi-circle text-success"></i> Delivered</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Marco Lightweight Shirt</td>
                                                                    <td>DHL</td>
                                                                    <td>
                                                                        <div class="progress progress-sm">
                                                                            <div class="progress-bar progress-lg bg-warning" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                                                        </div>
                                                                    </td>
                                                                    <td><i class="mdi mdi-circle text-warning"></i> Shipped</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Half Sleeve Shirt</td>
                                                                    <td>Bright</td>
                                                                    <td>
                                                                        <div class="progress progress-sm">
                                                                            <div class="progress-bar progress-lg bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                                                        </div>
                                                                    </td>
                                                                    <td><i class="mdi mdi-circle text-info"></i> Order Received</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Lightweight Jacket</td>
                                                                    <td>FedEx</td>
                                                                    <td>
                                                                        <div class="progress progress-sm">
                                                                            <div class="progress-bar progress-lg bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                                                        </div>
                                                                    </td>
                                                                    <td><i class="mdi mdi-circle text-success"></i> Delivered</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    
                                                

Hoverable rows

Add .table-hover to enable a hover state on table rows within a <tbody>.

Product Price Quantity Amount
ASOS Ridley High Waist $79.49 82 Pcs $6,518.18
Marco Lightweight Shirt $128.50 37 Pcs $4,754.50
Half Sleeve Shirt $39.99 64 Pcs $2,559.36
Lightweight Jacket $20.00 184 Pcs $3,680.00
                                                    
                                                        <table class="table table-hover table-centered mb-0">
                                                            <thead>
                                                                <tr>
                                                                    <th>Product</th>
                                                                    <th>Price</th>
                                                                    <th>Quantity</th>
                                                                    <th>Amount</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr>
                                                                    <td>ASOS Ridley High Waist</td>
                                                                    <td>$79.49</td>
                                                                    <td><span class="badge bg-primary">82 Pcs</span></td>
                                                                    <td>$6,518.18</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Marco Lightweight Shirt</td>
                                                                    <td>$128.50</td>
                                                                    <td><span class="badge bg-primary">37 Pcs</span></td>
                                                                    <td>$4,754.50</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Half Sleeve Shirt</td>
                                                                    <td>$39.99</td>
                                                                    <td><span class="badge bg-primary">64 Pcs</span></td>
                                                                    <td>$2,559.36</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Lightweight Jacket</td>
                                                                    <td>$20.00</td>
                                                                    <td><span class="badge bg-primary">184 Pcs</span></td>
                                                                    <td>$3,680.00</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    
                                                

Small table

Add .table-sm to make tables more compact by cutting cell padding in half.

Product Price Quantity Amount
ASOS Ridley High Waist $79.49 82 Pcs $6,518.18
Marco Lightweight Shirt $128.50 37 Pcs $4,754.50
Half Sleeve Shirt $39.99 64 Pcs $2,559.36
Lightweight Jacket $20.00 184 Pcs $3,680.00
Marco Shoes $28.49 69 Pcs $1,965.81
ASOS Ridley High Waist $79.49 82 Pcs $6,518.18
                                                    
                                                        <table class="table table-sm table-centered mb-0">
                                                            <thead>
                                                                <tr>
                                                                    <th>Product</th>
                                                                    <th>Price</th>
                                                                    <th>Quantity</th>
                                                                    <th>Amount</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr>
                                                                    <td>ASOS Ridley High Waist</td>
                                                                    <td>$79.49</td>
                                                                    <td><span class="badge bg-primary">82 Pcs</span></td>
                                                                    <td>$6,518.18</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Marco Lightweight Shirt</td>
                                                                    <td>$128.50</td>
                                                                    <td><span class="badge bg-primary">37 Pcs</span></td>
                                                                    <td>$4,754.50</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Half Sleeve Shirt</td>
                                                                    <td>$39.99</td>
                                                                    <td><span class="badge bg-primary">64 Pcs</span></td>
                                                                    <td>$2,559.36</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Lightweight Jacket</td>
                                                                    <td>$20.00</td>
                                                                    <td><span class="badge bg-primary">184 Pcs</span></td>
                                                                    <td>$3,680.00</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Marco Shoes</td>
                                                                    <td>$28.49</td>
                                                                    <td><span class="badge bg-primary">69 Pcs</span></td>
                                                                    <td>$1,965.81</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>ASOS Ridley High Waist</td>
                                                                    <td>$79.49</td>
                                                                    <td><span class="badge bg-primary">82 Pcs</span></td>
                                                                    <td>$6,518.18</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    
                                                

Bordered table

Add .table-bordered for borders on all sides of the table and cells.

User Account No. Balance Action
table-user Risa D. Pearson AC336 508 2157 July 24, 1950
table-user Ann C. Thompson SB646 473 2057 January 25, 1959
table-user Paul J. Friend DL281 308 0793 September 1, 1939
table-user Sean C. Nguyen CA269 714 6825 February 5, 1994
                                                    
                                                        <table class="table table-bordered table-centered mb-0">
                                                            <thead>
                                                                <tr>
                                                                    <th>User</th>
                                                                    <th>Account No.</th>
                                                                    <th>Balance</th>
                                                                    <th class="text-center">Action</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr>
                                                                    <td class="table-user">
                                                                        <img src="assets/images/users/avatar-6.jpg" alt="table-user" class="me-2 rounded-circle" />
                                                                        Risa D. Pearson
                                                                    </td>
                                                                    <td>AC336 508 2157</td>
                                                                    <td>July 24, 1950</td>
                                                                    <td class="table-action text-center">
                                                                        <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="table-user">
                                                                        <img src="assets/images/users/avatar-7.jpg" alt="table-user" class="me-2 rounded-circle" />
                                                                        Ann C. Thompson
                                                                    </td>
                                                                    <td>SB646 473 2057</td>
                                                                    <td>January 25, 1959</td>
                                                                    <td class="table-action text-center">
                                                                        <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="table-user">
                                                                        <img src="assets/images/users/avatar-8.jpg" alt="table-user" class="me-2 rounded-circle" />
                                                                        Paul J. Friend
                                                                    </td>
                                                                    <td>DL281 308 0793</td>
                                                                    <td>September 1, 1939</td>
                                                                    <td class="table-action text-center">
                                                                        <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="table-user">
                                                                        <img src="assets/images/users/avatar-9.jpg" alt="table-user" class="me-2 rounded-circle" />
                                                                        Sean C. Nguyen
                                                                    </td>
                                                                    <td>CA269 714 6825</td>
                                                                    <td>February 5, 1994</td>
                                                                    <td class="table-action text-center">
                                                                        <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    
                                                

Bordered color table

Add .table-bordered & .border-primary can be added to change colors.

User Account No. Balance Action
table-user Risa D. Pearson AC336 508 2157 July 24, 1950
table-user Ann C. Thompson SB646 473 2057 January 25, 1959
table-user Paul J. Friend DL281 308 0793 September 1, 1939
table-user Sean C. Nguyen CA269 714 6825 February 5, 1994
                                                    
                                                        <table class="table table-bordered border-primary table-centered mb-0">
                                                            <thead>
                                                                <tr>
                                                                    <th>User</th>
                                                                    <th>Account No.</th>
                                                                    <th>Balance</th>
                                                                    <th class="text-center">Action</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr>
                                                                    <td class="table-user">
                                                                        <img src="assets/images/users/avatar-6.jpg" alt="table-user" class="me-2 rounded-circle" />
                                                                        Risa D. Pearson
                                                                    </td>
                                                                    <td>AC336 508 2157</td>
                                                                    <td>July 24, 1950</td>
                                                                    <td class="table-action text-center">
                                                                        <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="table-user">
                                                                        <img src="assets/images/users/avatar-7.jpg" alt="table-user" class="me-2 rounded-circle" />
                                                                        Ann C. Thompson
                                                                    </td>
                                                                    <td>SB646 473 2057</td>
                                                                    <td>January 25, 1959</td>
                                                                    <td class="table-action text-center">
                                                                        <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="table-user">
                                                                        <img src="assets/images/users/avatar-8.jpg" alt="table-user" class="me-2 rounded-circle" />
                                                                        Paul J. Friend
                                                                    </td>
                                                                    <td>DL281 308 0793</td>
                                                                    <td>September 1, 1939</td>
                                                                    <td class="table-action text-center">
                                                                        <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="table-user">
                                                                        <img src="assets/images/users/avatar-9.jpg" alt="table-user" class="me-2 rounded-circle" />
                                                                        Sean C. Nguyen
                                                                    </td>
                                                                    <td>CA269 714 6825</td>
                                                                    <td>February 5, 1994</td>
                                                                    <td class="table-action text-center">
                                                                        <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    
                                                

Always responsive

Across every breakpoint, use .table-responsive for horizontally scrolling tables. Use .table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell
                                                    
                                                        <table class="table mb-0">
                                                            <thead>
                                                                <tr>
                                                                    <th scope="col">#</th>
                                                                    <th scope="col">Heading</th>
                                                                    <th scope="col">Heading</th>
                                                                    <th scope="col">Heading</th>
                                                                    <th scope="col">Heading</th>
                                                                    <th scope="col">Heading</th>
                                                                    <th scope="col">Heading</th>
                                                                    <th scope="col">Heading</th>
                                                                    <th scope="col">Heading</th>
                                                                    <th scope="col">Heading</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr>
                                                                    <th scope="row">1</th>
                                                                    <td>Cell</td>
                                                                    <td>Cell</td>
                                                                    <td>Cell</td>
                                                                    <td>Cell</td>
                                                                    <td>Cell</td>
                                                                    <td>Cell</td>
                                                                    <td>Cell</td>
                                                                    <td>Cell</td>
                                                                    <td>Cell</td>
                                                                </tr>
                                                                <tr>
                                                                    <th scope="row">2</th>
                                                                    <td>Cell</td>
                                                                    <td>Cell</td>
                                                                    <td>Cell</td>
                                                                    <td>Cell</td>
                                                                    <td>Cell</td>
                                                                    <td>Cell</td>
                                                                    <td>Cell</td>
                                                                    <td>Cell</td>
                                                                    <td>Cell</td>
                                                                </tr>
                                                                <tr>
                                                                    <th scope="row">3</th>
                                                                    <td>Cell</td>
                                                                    <td>Cell</td>
                                                                    <td>Cell</td>
                                                                    <td>Cell</td>
                                                                    <td>Cell</td>
                                                                    <td>Cell</td>
                                                                    <td>Cell</td>
                                                                    <td>Cell</td>
                                                                    <td>Cell</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    
                                                

Basic Borderless Example

Add .table-borderless for a table without borders.

Name Phone Number Date of Birth Active?
Risa D. Pearson 336-508-2157 July 24, 1950
Ann C. Thompson 646-473-2057 January 25, 1959
Paul J. Friend 281-308-0793 September 1, 1939
Linda G. Smith 606-253-1207 May 3, 1962
                                                    
                                                        <table class="table table-centered table-borderless mb-0">
                                                            <thead>
                                                                <tr>
                                                                    <th>Name</th>
                                                                    <th>Phone Number</th>
                                                                    <th>Date of Birth</th>
                                                                    <th>Active?</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr>
                                                                    <td>Risa D. Pearson</td>
                                                                    <td>336-508-2157</td>
                                                                    <td>July 24, 1950</td>
                                                                    <td>
                                                                        <!-- Switch-->
                                                                        <div>
                                                                            <input type="checkbox" id="switch21" checked data-switch="success"/>
                                                                            <label for="switch21" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Ann C. Thompson</td>
                                                                    <td>646-473-2057</td>
                                                                    <td>January 25, 1959</td>
                                                                    <td>
                                                                        <!-- Switch-->
                                                                        <div>
                                                                            <input type="checkbox" id="switch22" checked data-switch="success"/>
                                                                            <label for="switch22" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Paul J. Friend</td>
                                                                    <td>281-308-0793</td>
                                                                    <td>September 1, 1939</td>
                                                                    <td>
                                                                        <!-- Switch-->
                                                                        <div>
                                                                            <input type="checkbox" id="switch23" data-switch="success"/>
                                                                            <label for="switch23" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Linda G. Smith</td>
                                                                    <td>606-253-1207</td>
                                                                    <td>May 3, 1962</td>
                                                                    <td>
                                                                        <!-- Switch-->
                                                                        <div>
                                                                            <input type="checkbox" id="switch24" data-switch="success"/>
                                                                            <label for="switch24" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    
                                                

Inverse Borderless table

Add .table-borderless for a table without borders.

Name Phone Number Date of Birth Active?
Risa D. Pearson 336-508-2157 July 24, 1950
Ann C. Thompson 646-473-2057 January 25, 1959
Paul J. Friend 281-308-0793 September 1, 1939
Sean C. Nguyen 269-714-6825 February 5, 1994
                                                    
                                                        <table class="table table-dark table-borderless mb-0">
                                                            <thead>
                                                                <tr>
                                                                    <th>Name</th>
                                                                    <th>Phone Number</th>
                                                                    <th>Date of Birth</th>
                                                                    <th>Active?</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr>
                                                                    <td>Risa D. Pearson</td>
                                                                    <td>336-508-2157</td>
                                                                    <td>July 24, 1950</td>
                                                                    <td>
                                                                        <!-- Switch-->
                                                                        <div>
                                                                            <input type="checkbox" id="switch25" data-switch="success"/>
                                                                            <label for="switch25" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Ann C. Thompson</td>
                                                                    <td>646-473-2057</td>
                                                                    <td>January 25, 1959</td>
                                                                    <td>
                                                                        <!-- Switch-->
                                                                        <div>
                                                                            <input type="checkbox" id="switch26" checked data-switch="success"/>
                                                                            <label for="switch26" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Paul J. Friend</td>
                                                                    <td>281-308-0793</td>
                                                                    <td>September 1, 1939</td>
                                                                    <td>
                                                                        <!-- Switch-->
                                                                        <div>
                                                                            <input type="checkbox" id="switch27" data-switch="success"/>
                                                                            <label for="switch27" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Sean C. Nguyen</td>
                                                                    <td>269-714-6825</td>
                                                                    <td>February 5, 1994</td>
                                                                    <td>
                                                                        <!-- Switch-->
                                                                        <div>
                                                                            <input type="checkbox" id="switch28" checked data-switch="success"/>
                                                                            <label for="switch28" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    
                                                

Active tables

Highlight a table row or cell by adding a .table-active class.

Name Phone Number Date of Birth Active?
Risa D. Pearson 336-508-2157 July 24, 1950
Ann C. Thompson 646-473-2057 January 25, 1959
Paul J. Friend 281-308-0793 September 1, 1939
Linda G. Smith 606-253-1207
Paul J. Friend 281-308-0793 September 1, 1939
                                                        
                                                            <table class="table mb-0">
                                                                <thead>
                                                                    <tr>
                                                                        <th>Name</th>
                                                                        <th>Phone Number</th>
                                                                        <th>Date of Birth</th>
                                                                        <th>Active?</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    <tr class="table-active">
                                                                        <td>Risa D. Pearson</td>
                                                                        <td>336-508-2157</td>
                                                                        <td>July 24, 1950</td>
                                                                        <td>
                                                                            <!-- Switch-->
                                                                            <div>
                                                                                <input type="checkbox" id="switch29" checked data-switch="success" />
                                                                                <label for="switch29" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Ann C. Thompson</td>
                                                                        <td>646-473-2057</td>
                                                                        <td>January 25, 1959</td>
                                                                        <td>
                                                                            <!-- Switch-->
                                                                            <div>
                                                                                <input type="checkbox" id="switch30" checked data-switch="success" />
                                                                                <label for="switch30" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Paul J. Friend</td>
                                                                        <td>281-308-0793</td>
                                                                        <td>September 1, 1939</td>
                                                                        <td>
                                                                            <!-- Switch-->
                                                                            <div>
                                                                                <input type="checkbox" id="switch31" data-switch="success" />
                                                                                <label for="switch31" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td scope="row">Linda G. Smith</td>
                                                                        <td colspan="2" class="table-active">606-253-1207</td>
                                                                        <td>
                                                                            <!-- Switch-->
                                                                            <div>
                                                                                <input type="checkbox" id="switch32" data-switch="success" />
                                                                                <label for="switch32" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Paul J. Friend</td>
                                                                        <td>281-308-0793</td>
                                                                        <td>September 1, 1939</td>
                                                                        <td>
                                                                            <!-- Switch-->
                                                                            <div>
                                                                                <input type="checkbox" id="switch33" checked data-switch="success" />
                                                                                <label for="switch33" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        
                                                    

Nesting

Border styles, active styles, and table variants are not inherited by nested tables.

Name Phone Number Date of Birth Active?
Risa D. Pearson 336-508-2157 July 24, 1950
Name Phone Number Date of Birth Active?
Risa D. Pearson 336-508-2157 July 24, 1950
Ann C. Thompson 646-473-2057 January 25, 1959
Linda G. Smith 606-253-1207 September 2, 1939
                                                        
                                                            <table class="table table-striped mb-0">
                                                                <thead>
                                                                    <tr>
                                                                        <th>Name</th>
                                                                        <th>Phone Number</th>
                                                                        <th>Date of Birth</th>
                                                                        <th>Active?</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    <tr>
                                                                        <td>Risa D. Pearson</td>
                                                                        <td>336-508-2157</td>
                                                                        <td>July 24, 1950</td>
                                                                        <td>
                                                                            <!-- Switch-->
                                                                            <div>
                                                                                <input type="checkbox" id="switch34" checked data-switch="success" />
                                                                                <label for="switch34" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td colspan="4">
                                                                            <table class="table mb-0">
                                                                                <thead>
                                                                                    <tr>
                                                                                        <th>Name</th>
                                                                                        <th>Phone Number</th>
                                                                                        <th>Date of Birth</th>
                                                                                        <th>Active?</th>
                                                                                    </tr>
                                                                                </thead>
                                                                                <tbody>
                                                                                    <tr>
                                                                                        <td>Risa D. Pearson</td>
                                                                                        <td>336-508-2157</td>
                                                                                        <td>July 24, 1950</td>
                                                                                        <td>
                                                                                            <!-- Switch-->
                                                                                            <div>
                                                                                                <input type="checkbox" id="switch35" checked data-switch="success" />
                                                                                                <label for="switch35" data-on-label="Yes" data-off-label="No"
                                                                                                    class="mb-0 d-block"></label>
                                                                                            </div>
                                                                                        </td>
                                                                                    </tr>
                                                                                    <tr>
                                                                                        <td>Ann C. Thompson</td>
                                                                                        <td>646-473-2057</td>
                                                                                        <td>January 25, 1959</td>
                                                                                        <td>
                                                                                            <!-- Switch-->
                                                                                            <div>
                                                                                                <input type="checkbox" id="switch36" data-switch="success" />
                                                                                                <label for="switch36" data-on-label="Yes" data-off-label="No"
                                                                                                    class="mb-0 d-block"></label>
                                                                                            </div>
                                                                                        </td>
                                                                                    </tr>
                                                                                </tbody>
                                                                            </table>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Linda G. Smith</td>
                                                                        <td>606-253-1207</td>
                                                                        <td>September 2, 1939</td>
                                                                        <td>
                                                                            <!-- Switch-->
                                                                            <div>
                                                                                <input type="checkbox" id="switch37" data-switch="success" />
                                                                                <label for="switch37" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        
                                                    
Theme Settings
Choose Layout
Vertical
Horizontal
Color Scheme
Light
Dark
Layout Mode
Fluid
Boxed
Detached
Topbar Color
Light
Dark
Brand
Menu Color
Light
Dark
Brand
Layout Position