ArrOw

Please wait...

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/images/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/images/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/images/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/images/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