Purpose Website UI Kit

Tables

Documentation and examples for opt-in styling of tables.

Open Bootstrap Docs

Example

 Name Email Location
Nabiha Armstrong
Web Developer
nabiha.armstrong@example.com Cluj Napoca, RO
Dan Holding
Product Designer
dan.holding@example.com New York, USA
WS
Will Smith
Sales Manager
will.smith@example.com Los Angeles, USA
CT
Charlize Theron
UI/UX Designer
charlize.theron@example.com Bucharest, RO 
<table class="table table-hover align-items-center">
    <thead>
        <tr>
            <th scope="col">
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="th_checkbox">
                    <label class="custom-control-label" for="th_checkbox"></label>
                </div>
            </th>
            <th scope="col">Name</th>
            <th scope="col">Email</th>
            <th scope="col">Location</th>
        </tr>
    </thead>
    <tbody>
        <tr class="bg-white" scope="row">
            <td>
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="td_checkbox_1">
                    <label class="custom-control-label" for="td_checkbox_1"></label>
                </div>
            </td>
            <td>
                <div class="media align-items-center">
                    <img src="../assets/img/prv/thumb-1.jpg" class="avatar avatar-lg mr-3">
                    <div class="media-body">
                        <h6 class="h5 font-weight-normal mb-0">Nabiha Armstrong</h6>
                        <span class="font-weight-normal text-muted">Web Developer</span>
                    </div>
                </div>
            </td>
            <td>nabiha.armstrong@example.com</td>
            <td>Cluj Napoca, RO</td>
        </tr>
        <tr class="bg-white" scope="row">
            <td>
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="td_checkbox_2">
                    <label class="custom-control-label" for="td_checkbox_2"></label>
                </div>
            </td>
            <td>
                <div class="media align-items-center">
                    <img src="../assets/img/prv/thumb-2.jpg" class="avatar avatar-lg mr-3">
                    <div class="media-body">
                        <h6 class="h5 font-weight-normal mb-0">Dan Holding</h6>
                        <span class="font-weight-normal text-muted">Product Designer</span>
                    </div>
                </div>
            </td>
            <td>dan.holding@example.com</td>
            <td>New York, USA</td>
        </tr>
        <tr class="bg-white" scope="row">
            <td>
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="td_checkbox_1">
                    <label class="custom-control-label" for="td_checkbox_1"></label>
                </div>
            </td>
            <td>
                <div class="media align-items-center">
                    <span class="avatar avatar-lg bg-blue mr-3">WS</span>
                    <div class="media-body">
                        <h6 class="h5 font-weight-normal mb-0">Will Smith</h6>
                        <span class="font-weight-normal text-muted">Sales Manager</span>
                    </div>
                </div>
            </td>
            <td>will.smith@example.com</td>
            <td>Los Angeles, USA</td>
        </tr>
        <tr class="bg-white" scope="row">
            <td>
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="td_checkbox_1">
                    <label class="custom-control-label" for="td_checkbox_1"></label>
                </div>
            </td>
            <td>
                <div class="media align-items-center">
                    <span class="avatar avatar-lg bg-pink mr-3">CT</span>
                    <div class="media-body">
                        <h6 class="h5 font-weight-normal mb-0">Charlize Theron</h6>
                        <span class="font-weight-normal text-muted">UI/UX Designer</span>
                    </div>
                </div>
            </td>
            <td>charlize.theron@example.com</td>
            <td>Bucharest, RO</td>
        </tr>
    </tbody>
</table>

Card rows

Name Email Location
Nabiha Armstrong
Web Developer
nabiha.armstrong@example.com Cluj Napoca, RO
Dan Holding
Product Designer
dan.holding@example.com New York, USA
WS
Will Smith
Sales Manager
will.smith@example.com Los Angeles, USA
CT
Charlize Theron
UI/UX Designer
charlize.theron@example.com Bucharest, RO 
<table class="table table-hover table-cards align-items-center">
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Email</th>
            <th scope="col">Location</th>
        </tr>
    </thead>
    <tbody>
        <tr class="bg-white">
            <th scope="row">
                <div class="media align-items-center">
                    <img src="../assets/img/prv/thumb-1.jpg" class="avatar avatar-lg mr-3">
                    <div class="media-body">
                        <h6 class="h5 font-weight-normal mb-0">Nabiha Armstrong</h6>
                        <span class="font-weight-normal text-muted">Web Developer</span>
                    </div>
                </div>
            </th>
            <td>nabiha.armstrong@example.com</td>
            <td>Cluj Napoca, RO</td>
        </tr>
        <tr class="table-divider"></tr>
        <tr class="bg-white">
            <th scope="row">
                <div class="media align-items-center">
                    <img src="../assets/img/prv/thumb-2.jpg" class="avatar avatar-lg mr-3">
                    <div class="media-body">
                        <h6 class="h5 font-weight-normal mb-0">Dan Holding</h6>
                        <span class="font-weight-normal text-muted">Product Designer</span>
                    </div>
                </div>
            </th>
            <td>dan.holding@example.com</td>
            <td>New York, USA</td>
        </tr>
        <tr class="table-divider"></tr>
        <tr class="bg-white">
            <th scope="row">
                <div class="media align-items-center">
                    <span class="avatar avatar-lg bg-blue mr-3">WS</span>
                    <div class="media-body">
                        <h6 class="h5 font-weight-normal mb-0">Will Smith</h6>
                        <span class="font-weight-normal text-muted">Sales Manager</span>
                    </div>
                </div>
            </th>
            <td>will.smith@example.com</td>
            <td>Los Angeles, USA</td>
        </tr>
        <tr class="table-divider"></tr>
        <tr class="bg-white">
            <th scope="row">
                <div class="media align-items-center">
                    <span class="avatar avatar-lg bg-pink mr-3">CT</span>
                    <div class="media-body">
                        <h6 class="h5 font-weight-normal mb-0">Charlize Theron</h6>
                        <span class="font-weight-normal text-muted">UI/UX Designer</span>
                    </div>
                </div>
            </th>
            <td>charlize.theron@example.com</td>
            <td>Bucharest, RO</td>
        </tr>
        <tr class="table-divider"></tr>
    </tbody>
</table>
Additional Class Reference

You can see all the background options in the dedicated page which can be found here.

.table-cards
Apply to .table for a card style table
.align-items-center
Apply to .table in order to center vertically the elements