Tables

Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Purpose.

Bootstrap Documentation

Basic

Due to the widespread use of tables across third-party widgets like calendars and date pickers, we’ve designed our tables to be opt-in. Just add the base class .table to any <table>, then extend with custom styles or our various included modifier classes.

Using the most basic table markup, here’s how .table-based tables look in Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<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>

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<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>

Cards

Purpose comes with an alternative style for tables. Use .table-cards applied on the main table and the .table-divider applied on a <tr> element to achieve this modern look.

# First Last Handle
1 Mark Otto @mdo
1 Mark Otto @mdo
1 Mark Otto @mdo
1 Mark Otto @mdo
1 Mark Otto @mdo

Examples

Projects

Project Budget Status Users Completion
Image placeholder
Purpose Design System
$2500 USD pending
60%
Image placeholder
Website redesign
$1800 USD completed
100%
Image placeholder
Webpixels website launch
$3150 USD delayed
72%
Image placeholder
Purpose Website UI Kit
$4400 USD on schedule
90%
<div class="table-responsive">
    <table class="table table-cards align-items-center">
        <thead>
            <tr>
                <th scope="col" class="sort" data-sort="name">Project</th>
                <th scope="col" class="sort" data-sort="budget">Budget</th>
                <th scope="col" class="sort" data-sort="status">Status</th>
                <th scope="col">Users</th>
                <th scope="col" class="sort" data-sort="completion">Completion</th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody class="list">
            
            <tr>
                <th scope="row">
                    <div class="media align-items-center">
                        <div>
                            
    <img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-1.png" class="avatar  rounded-circle">

                        </div>
                        <div class="media-body ml-4">
                            <span class="name mb-0 text-sm">Purpose Design System</span>
                        </div>
                    </div>
                </th>
                <td class="budget">
                    $2500 USD
                </td>
                <td>
                    <span class="badge badge-dot mr-4">
                      <i class="bg-warning"></i>
                      <span class="status">pending</span>
                    </span>
                </td>
                <td>
                    
<div class="avatar-group">
    
<a href="#" class="avatar rounded-circle avatar-sm">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">

</a>
    
<a href="#" class="avatar rounded-circle avatar-sm">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">

</a>
    
<a href="#" class="avatar rounded-circle avatar-sm">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-3-800x800.jpg" class="">

</a>
</div>

                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <span class="completion mr-2">60%</span>
                        <div>
                            <div class="progress">
                                <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
                            </div>
                        </div>
                    </div>
                </td>
                <td class="text-right">
                    <!-- Actions -->
                    <div class="actions ml-3">
                        <a href="#" class="action-item mr-2" data-toggle="tooltip" title="Quick view">
                            <i class="fas fa-external-link-alt"></i>
                        </a>
                        <a href="#" class="action-item mr-2" data-toggle="tooltip" title="Edit">
                            <i class="fas fa-pencil-alt"></i>
                        </a>
                        <a href="#" class="action-item text-danger mr-2" data-toggle="tooltip" title="Move to trash">
                            <i class="fas fa-trash"></i>
                        </a>
                    </div>
                </td>
            </tr>
            
            <tr class="table-divider"></tr>
            
            
            <tr>
                <th scope="row">
                    <div class="media align-items-center">
                        <div>
                            
    <img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-2.png" class="avatar  rounded-circle">

                        </div>
                        <div class="media-body ml-4">
                            <span class="name mb-0 text-sm">Website redesign</span>
                        </div>
                    </div>
                </th>
                <td class="budget">
                    $1800 USD
                </td>
                <td>
                    <span class="badge badge-dot mr-4">
                      <i class="bg-success"></i>
                      <span class="status">completed</span>
                    </span>
                </td>
                <td>
                    
<div class="avatar-group">
    
<a href="#" class="avatar rounded-circle avatar-sm">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">

</a>
    
<a href="#" class="avatar rounded-circle avatar-sm">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">

</a>
    
<a href="#" class="avatar rounded-circle avatar-sm">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-3-800x800.jpg" class="">

</a>
</div>

                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <span class="completion mr-2">100%</span>
                        <div>
                            <div class="progress">
                                <div class="progress-bar bg-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
                            </div>
                        </div>
                    </div>
                </td>
                <td class="text-right">
                    <!-- Actions -->
                    <div class="actions ml-3">
                        <a href="#" class="action-item mr-2" data-toggle="tooltip" title="Quick view">
                            <i class="fas fa-external-link-alt"></i>
                        </a>
                        <a href="#" class="action-item mr-2" data-toggle="tooltip" title="Edit">
                            <i class="fas fa-pencil-alt"></i>
                        </a>
                        <a href="#" class="action-item text-danger mr-2" data-toggle="tooltip" title="Move to trash">
                            <i class="fas fa-trash"></i>
                        </a>
                    </div>
                </td>
            </tr>
            
            <tr class="table-divider"></tr>
            
            
            <tr>
                <th scope="row">
                    <div class="media align-items-center">
                        <div>
                            
    <img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-3.png" class="avatar  rounded-circle">

                        </div>
                        <div class="media-body ml-4">
                            <span class="name mb-0 text-sm">Webpixels website launch</span>
                        </div>
                    </div>
                </th>
                <td class="budget">
                    $3150 USD
                </td>
                <td>
                    <span class="badge badge-dot mr-4">
                      <i class="bg-danger"></i>
                      <span class="status">delayed</span>
                    </span>
                </td>
                <td>
                    
<div class="avatar-group">
    
<a href="#" class="avatar rounded-circle avatar-sm">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">

</a>
    
<a href="#" class="avatar rounded-circle avatar-sm">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">

</a>
    
<a href="#" class="avatar rounded-circle avatar-sm">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-3-800x800.jpg" class="">

</a>
</div>

                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <span class="completion mr-2">72%</span>
                        <div>
                            <div class="progress">
                                <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="width: 72%;"></div>
                            </div>
                        </div>
                    </div>
                </td>
                <td class="text-right">
                    <!-- Actions -->
                    <div class="actions ml-3">
                        <a href="#" class="action-item mr-2" data-toggle="tooltip" title="Quick view">
                            <i class="fas fa-external-link-alt"></i>
                        </a>
                        <a href="#" class="action-item mr-2" data-toggle="tooltip" title="Edit">
                            <i class="fas fa-pencil-alt"></i>
                        </a>
                        <a href="#" class="action-item text-danger mr-2" data-toggle="tooltip" title="Move to trash">
                            <i class="fas fa-trash"></i>
                        </a>
                    </div>
                </td>
            </tr>
            
            <tr class="table-divider"></tr>
            
            
            <tr>
                <th scope="row">
                    <div class="media align-items-center">
                        <div>
                            
    <img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-4.png" class="avatar  rounded-circle">

                        </div>
                        <div class="media-body ml-4">
                            <span class="name mb-0 text-sm">Purpose Website UI Kit</span>
                        </div>
                    </div>
                </th>
                <td class="budget">
                    $4400 USD
                </td>
                <td>
                    <span class="badge badge-dot mr-4">
                      <i class="bg-info"></i>
                      <span class="status">on schedule</span>
                    </span>
                </td>
                <td>
                    
<div class="avatar-group">
    
<a href="#" class="avatar rounded-circle avatar-sm">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">

</a>
    
<a href="#" class="avatar rounded-circle avatar-sm">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">

</a>
    
<a href="#" class="avatar rounded-circle avatar-sm">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-3-800x800.jpg" class="">

</a>
</div>

                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <span class="completion mr-2">90%</span>
                        <div>
                            <div class="progress">
                                <div class="progress-bar bg-info" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
                            </div>
                        </div>
                    </div>
                </td>
                <td class="text-right">
                    <!-- Actions -->
                    <div class="actions ml-3">
                        <a href="#" class="action-item mr-2" data-toggle="tooltip" title="Quick view">
                            <i class="fas fa-external-link-alt"></i>
                        </a>
                        <a href="#" class="action-item mr-2" data-toggle="tooltip" title="Edit">
                            <i class="fas fa-pencil-alt"></i>
                        </a>
                        <a href="#" class="action-item text-danger mr-2" data-toggle="tooltip" title="Move to trash">
                            <i class="fas fa-trash"></i>
                        </a>
                    </div>
                </td>
            </tr>
            
            
        </tbody>
    </table>
</div>

Orders

Invoice Order Client Value Taxes
10/09/2018 ABC 00023 Apple Inc $1.274,89 $1.115,45
10/09/2018 ABC 00023 Apple Inc $1.274,89 $1.115,45
10/09/2018 ABC 00023 Apple Inc $1.274,89 $1.115,45
10/09/2018 ABC 00023 Apple Inc $1.274,89 $1.115,45
<div class="table-responsive">
    <table class="table table-cards align-items-center">
        <thead>
            <tr>
                <th scope="col">Invoice</th>
                <th scope="col" class="sort">Order</th>
                <th scope="col" class="sort">Client</th>
                <th scope="col" class="sort">Value</th>
                <th scope="col" class="sort">Taxes</th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody>
            
            <tr>
                <th scope="row">
                    <button type="button" class="btn btn-sm btn-secondary btn-icon rounded-pill">
                        <span class="btn-inner--icon"><i class="fas fa-download"></i></span>
                        <span class="btn-inner--text">Invoice</span>
                    </button>
                </th>
                <td class="order">
                    <span class="h6 text-sm font-weight-bold mb-0">10/09/2018</span>
                    <span class="d-block text-sm text-muted">ABC 00023</span>
                </td>
                <td>
                    <span class="client">Apple Inc</span>
                </td>
                <td>
                    <span class="value text-sm mb-0">$1.274,89</span>
                </td>
                <td>
                    <span class="taxes text-sm mb-0">$1.115,45</span>
                </td>
                <td>
                    <div class="d-flex align-items-center justify-content-end">
                        
                        <button type="button" class="btn btn-sm btn-soft-warning btn-icon rounded-pill">
                            <span class="btn-inner--icon"><i class="fas fa-plus"></i></span>
                            <span class="btn-inner--text">Pay now</span>
                        </button>
                        
                        <!-- Actions -->
                        <div class="actions ml-3">
                            <a href="#" class="action-item mr-2" data-toggle="tooltip" title="Edit">
                                <i class="fas fa-pencil-alt"></i>
                            </a>
                            <a href="#" class="action-item mr-2" data-toggle="tooltip" title="Archive">
                                <i class="fas fa-archive"></i>
                            </a>
                            <div class="dropdown">
                                <a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" data-expanded="false">
                                    <i class="fas fa-ellipsis-v"></i>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a href="#!" class="dropdown-item">
                                        Action
                                    </a>
                                    <a href="#!" class="dropdown-item">
                                        Another action
                                    </a>
                                    <a href="#!" class="dropdown-item">
                                        Something else here
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                </td>
            </tr>
            
            <tr class="table-divider"></tr>
            
            
            <tr>
                <th scope="row">
                    <button type="button" class="btn btn-sm btn-secondary btn-icon rounded-pill">
                        <span class="btn-inner--icon"><i class="fas fa-download"></i></span>
                        <span class="btn-inner--text">Invoice</span>
                    </button>
                </th>
                <td class="order">
                    <span class="h6 text-sm font-weight-bold mb-0">10/09/2018</span>
                    <span class="d-block text-sm text-muted">ABC 00023</span>
                </td>
                <td>
                    <span class="client">Apple Inc</span>
                </td>
                <td>
                    <span class="value text-sm mb-0">$1.274,89</span>
                </td>
                <td>
                    <span class="taxes text-sm mb-0">$1.115,45</span>
                </td>
                <td>
                    <div class="d-flex align-items-center justify-content-end">
                        
                        <button type="button" class="btn btn-sm btn-soft-success btn-icon rounded-pill">
                            <span class="btn-inner--icon"><i class="fas fa-check"></i></span>
                            <span class="btn-inner--text">Paid: 10/09/2018</span>
                        </button>
                        
                        <!-- Actions -->
                        <div class="actions ml-3">
                            <a href="#" class="action-item mr-2" data-toggle="tooltip" title="Edit">
                                <i class="fas fa-pencil-alt"></i>
                            </a>
                            <a href="#" class="action-item mr-2" data-toggle="tooltip" title="Archive">
                                <i class="fas fa-archive"></i>
                            </a>
                            <div class="dropdown">
                                <a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" data-expanded="false">
                                    <i class="fas fa-ellipsis-v"></i>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a href="#!" class="dropdown-item">
                                        Action
                                    </a>
                                    <a href="#!" class="dropdown-item">
                                        Another action
                                    </a>
                                    <a href="#!" class="dropdown-item">
                                        Something else here
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                </td>
            </tr>
            
            <tr class="table-divider"></tr>
            
            
            <tr>
                <th scope="row">
                    <button type="button" class="btn btn-sm btn-secondary btn-icon rounded-pill">
                        <span class="btn-inner--icon"><i class="fas fa-download"></i></span>
                        <span class="btn-inner--text">Invoice</span>
                    </button>
                </th>
                <td class="order">
                    <span class="h6 text-sm font-weight-bold mb-0">10/09/2018</span>
                    <span class="d-block text-sm text-muted">ABC 00023</span>
                </td>
                <td>
                    <span class="client">Apple Inc</span>
                </td>
                <td>
                    <span class="value text-sm mb-0">$1.274,89</span>
                </td>
                <td>
                    <span class="taxes text-sm mb-0">$1.115,45</span>
                </td>
                <td>
                    <div class="d-flex align-items-center justify-content-end">
                        
                        <button type="button" class="btn btn-sm btn-soft-success btn-icon rounded-pill">
                            <span class="btn-inner--icon"><i class="fas fa-check"></i></span>
                            <span class="btn-inner--text">Paid: 10/09/2018</span>
                        </button>
                        
                        <!-- Actions -->
                        <div class="actions ml-3">
                            <a href="#" class="action-item mr-2" data-toggle="tooltip" title="Edit">
                                <i class="fas fa-pencil-alt"></i>
                            </a>
                            <a href="#" class="action-item mr-2" data-toggle="tooltip" title="Archive">
                                <i class="fas fa-archive"></i>
                            </a>
                            <div class="dropdown">
                                <a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" data-expanded="false">
                                    <i class="fas fa-ellipsis-v"></i>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a href="#!" class="dropdown-item">
                                        Action
                                    </a>
                                    <a href="#!" class="dropdown-item">
                                        Another action
                                    </a>
                                    <a href="#!" class="dropdown-item">
                                        Something else here
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                </td>
            </tr>
            
            <tr class="table-divider"></tr>
            
            
            <tr>
                <th scope="row">
                    <button type="button" class="btn btn-sm btn-secondary btn-icon rounded-pill">
                        <span class="btn-inner--icon"><i class="fas fa-download"></i></span>
                        <span class="btn-inner--text">Invoice</span>
                    </button>
                </th>
                <td class="order">
                    <span class="h6 text-sm font-weight-bold mb-0">10/09/2018</span>
                    <span class="d-block text-sm text-muted">ABC 00023</span>
                </td>
                <td>
                    <span class="client">Apple Inc</span>
                </td>
                <td>
                    <span class="value text-sm mb-0">$1.274,89</span>
                </td>
                <td>
                    <span class="taxes text-sm mb-0">$1.115,45</span>
                </td>
                <td>
                    <div class="d-flex align-items-center justify-content-end">
                        
                        <button type="button" class="btn btn-sm btn-soft-success btn-icon rounded-pill">
                            <span class="btn-inner--icon"><i class="fas fa-check"></i></span>
                            <span class="btn-inner--text">Paid: 10/09/2018</span>
                        </button>
                        
                        <!-- Actions -->
                        <div class="actions ml-3">
                            <a href="#" class="action-item mr-2" data-toggle="tooltip" title="Edit">
                                <i class="fas fa-pencil-alt"></i>
                            </a>
                            <a href="#" class="action-item mr-2" data-toggle="tooltip" title="Archive">
                                <i class="fas fa-archive"></i>
                            </a>
                            <div class="dropdown">
                                <a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" data-expanded="false">
                                    <i class="fas fa-ellipsis-v"></i>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a href="#!" class="dropdown-item">
                                        Action
                                    </a>
                                    <a href="#!" class="dropdown-item">
                                        Another action
                                    </a>
                                    <a href="#!" class="dropdown-item">
                                        Something else here
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                </td>
            </tr>
            
            
        </tbody>
    </table>
</div>

Tasks

Task Status Progress Due date Team
Call with Dave Priority 70 20-03-2019
Lunch meeting Priority 70 20-03-2019
Webpixels website redesign Priority 70 20-03-2019
Dashboard cards Priority 70 20-03-2019
<div class="table-responsive">
    <table class="table table-cards align-items-center">
        <thead>
            <tr>
                <th scope="col" class="sort" data-sort="name">Task</th>
                <th scope="col" class="sort" data-sort="budget">Status</th>
                <th scope="col" class="sort" data-sort="status">Progress</th>
                <th scope="col">Due date</th>
                <th scope="col" class="sort" data-sort="completion">Team</th>
            </tr>
        </thead>
        <tbody class="list">
            
            <tr>
                <th scope="row">
                    <span class="font-weight-bold text-sm">Call with Dave</span>
                </th>
                <td>
                    <span class="badge badge-dot mr-4">
                        <i class="bg-success"></i> Priority
                    </span>
                </td>
                <td>
                    <span class="text-sm">70</span>
                </td>
                <td>
                    <span class="text-sm">20-03-2019</span>
                </td>
                <td>
                    
<div class="avatar-group">
    
<a href="#" class="avatar rounded-circle avatar-sm">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">

</a>
    
<a href="#" class="avatar rounded-circle avatar-sm">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">

</a>
    
<a href="#" class="avatar rounded-circle avatar-sm">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-3-800x800.jpg" class="">

</a>
</div>

                </td>
            </tr><tr class="table-divider"></tr>
            <tr>
                <th scope="row">
                    <span class="font-weight-bold text-sm">Lunch meeting</span>
                </th>
                <td>
                    <span class="badge badge-dot mr-4">
                        <i class="bg-warning"></i> Priority
                    </span>
                </td>
                <td>
                    <span class="text-sm">70</span>
                </td>
                <td>
                    <span class="text-sm">20-03-2019</span>
                </td>
                <td>
                    
<div class="avatar-group">
    
<a href="#" class="avatar rounded-circle avatar-sm">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">

</a>
    
<a href="#" class="avatar rounded-circle avatar-sm">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">

</a>
    
<a href="#" class="avatar rounded-circle avatar-sm">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-3-800x800.jpg" class="">

</a>
</div>

                </td>
            </tr><tr class="table-divider"></tr>
            <tr>
                <th scope="row">
                    <span class="font-weight-bold text-sm">Webpixels website redesign</span>
                </th>
                <td>
                    <span class="badge badge-dot mr-4">
                        <i class="bg-info"></i> Priority
                    </span>
                </td>
                <td>
                    <span class="text-sm">70</span>
                </td>
                <td>
                    <span class="text-sm">20-03-2019</span>
                </td>
                <td>
                    
<div class="avatar-group">
    
<a href="#" class="avatar rounded-circle avatar-sm">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">

</a>
    
<a href="#" class="avatar rounded-circle avatar-sm">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">

</a>
    
<a href="#" class="avatar rounded-circle avatar-sm">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-3-800x800.jpg" class="">

</a>
</div>

                </td>
            </tr><tr class="table-divider"></tr>
            <tr>
                <th scope="row">
                    <span class="font-weight-bold text-sm">Dashboard cards</span>
                </th>
                <td>
                    <span class="badge badge-dot mr-4">
                        <i class="bg-danger"></i> Priority
                    </span>
                </td>
                <td>
                    <span class="text-sm">70</span>
                </td>
                <td>
                    <span class="text-sm">20-03-2019</span>
                </td>
                <td>
                    
<div class="avatar-group">
    
<a href="#" class="avatar rounded-circle avatar-sm">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">

</a>
    
<a href="#" class="avatar rounded-circle avatar-sm">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">

</a>
    
<a href="#" class="avatar rounded-circle avatar-sm">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-3-800x800.jpg" class="">

</a>
</div>

                </td>
            </tr>
        </tbody>
    </table>
</div>

Addresses

Address 1Primary

1333 Deerfield, State College PA, 16803

Address 2

2047 Main Street, State Chicago CH, 20067

Address 3

5078 Third Street, State New York NY, 33006

<div class="table-responsive">
    <table class="table table-cards align-items-center">
        <tbody class="list">
            
            <tr>
                <th scope="row">
                    <div class="custom-control custom-checkbox">
                        <input type="radio" class="custom-control-input" name="radio-address" id="tbl-addresses-check-1" checked>
                        <label class="custom-control-label" for="tbl-addresses-check-1"></label>
                    </div>
                </th>
                <td>
                    <span class="font-weight-600 text-dark">Address 1</span><span class="badge badge-pill badge-soft-info ml-2">Primary</span></td>
                <td>
                    <p class="mb-0 text-muted text-limit text-sm">1333 Deerfield, State College PA, 16803</p>
                </td>
                <td>
                    <div class="actions">
                        <div class="dropdown">
                            <a class="action-item" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-v"></i></a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" href="#"><i class="fas fa-edit text-muted"></i>Edit address</a>
                                <a class="dropdown-item" href="#"><i class="fas fa-trash-alt text-danger"></i>Move to trash</a>
                            </div>
                        </div>
                    </div>
                </td>
            </tr><tr class="table-divider"></tr>
            <tr>
                <th scope="row">
                    <div class="custom-control custom-checkbox">
                        <input type="radio" class="custom-control-input" name="radio-address" id="tbl-addresses-check-2">
                        <label class="custom-control-label" for="tbl-addresses-check-2"></label>
                    </div>
                </th>
                <td>
                    <span class="font-weight-600 text-dark">Address 2</span></td>
                <td>
                    <p class="mb-0 text-muted text-limit text-sm">2047 Main Street, State Chicago CH, 20067</p>
                </td>
                <td>
                    <div class="actions">
                        <div class="dropdown">
                            <a class="action-item" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-v"></i></a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" href="#"><i class="fas fa-edit text-muted"></i>Edit address</a>
                                <a class="dropdown-item" href="#"><i class="fas fa-trash-alt text-danger"></i>Move to trash</a>
                            </div>
                        </div>
                    </div>
                </td>
            </tr><tr class="table-divider"></tr>
            <tr>
                <th scope="row">
                    <div class="custom-control custom-checkbox">
                        <input type="radio" class="custom-control-input" name="radio-address" id="tbl-addresses-check-3">
                        <label class="custom-control-label" for="tbl-addresses-check-3"></label>
                    </div>
                </th>
                <td>
                    <span class="font-weight-600 text-dark">Address 3</span></td>
                <td>
                    <p class="mb-0 text-muted text-limit text-sm">5078 Third Street, State New York NY, 33006</p>
                </td>
                <td>
                    <div class="actions">
                        <div class="dropdown">
                            <a class="action-item" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-v"></i></a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" href="#"><i class="fas fa-edit text-muted"></i>Edit address</a>
                                <a class="dropdown-item" href="#"><i class="fas fa-trash-alt text-danger"></i>Move to trash</a>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Cart

Product Price Size Quantity Total
Image placeholder
Home Base
Size: 42
$129 USD 42 $129 USD
Image placeholder
Home Controller
Size: M
$49 USD M $147 USD
Image placeholder
Adapt Earphones
Size: L
$65 USD L $65 USD
Image placeholder
Smart Pixel 3
Size: 40
$299 USD 40 $299 USD
<div class="table-responsive">
    <table class="table table-cards align-items-center">
        <thead>
            <tr>
                <th scope="col" class="sort" data-sort="product">Product</th>
                <th scope="col" class="sort" data-sort="price">Price</th>
                <th scope="col" class="sort" data-sort="size">Size</th>
                <th scope="col">Quantity</th>
                <th scope="col" class="sort" data-sort="total">Total</th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody class="list">
            
            <tr>
                <th scope="row">
                    <div class="media align-items-center">
                        <img alt="Image placeholder" src="../../assets/img/theme/light/product-1.png" class="" style="width: 80px;">

                        <div class="media-body pl-3">
                            <div class="lh-100">
                                <span class="text-dark font-weight-bold mb-0">Home Base</span>
                            </div>
                            <span class="font-weight-bold text-muted">Size: 42</span>
                        </div>
                    </div>
                </th>
                <td class="price">
                    $129 USD
                </td>
                <td>
                    <span class="badge badge-dot mr-4">
                      <i class="bg-"></i>
                      <span class="status">42</span>
                    </span>
                </td>
                <td>
                    <input type="text" class="form-control form-control-sm text-center" style="width: 80px;" value="1">
                </td>
                <td class="total">
                    $129 USD
                </td>
                <td class="text-right">
                    <!-- Actions -->
                    <div class="actions ml-3">
                        <a href="#" class="action-item mr-2" data-toggle="tooltip" title="Quick view">
                            <i class="fas fa-external-link-alt"></i>
                        </a>
                        <a href="#" class="action-item mr-2" data-toggle="tooltip" title="Move to trash">
                            <i class="fas fa-times"></i>
                        </a>
                    </div>
                </td>
            </tr>
            
            <tr class="table-divider"></tr>
            
            
            <tr>
                <th scope="row">
                    <div class="media align-items-center">
                        <img alt="Image placeholder" src="../../assets/img/theme/light/product-2.png" class="" style="width: 80px;">

                        <div class="media-body pl-3">
                            <div class="lh-100">
                                <span class="text-dark font-weight-bold mb-0">Home Controller</span>
                            </div>
                            <span class="font-weight-bold text-muted">Size: M</span>
                        </div>
                    </div>
                </th>
                <td class="price">
                    $49 USD
                </td>
                <td>
                    <span class="badge badge-dot mr-4">
                      <i class="bg-"></i>
                      <span class="status">M</span>
                    </span>
                </td>
                <td>
                    <input type="text" class="form-control form-control-sm text-center" style="width: 80px;" value="3">
                </td>
                <td class="total">
                    $147 USD
                </td>
                <td class="text-right">
                    <!-- Actions -->
                    <div class="actions ml-3">
                        <a href="#" class="action-item mr-2" data-toggle="tooltip" title="Quick view">
                            <i class="fas fa-external-link-alt"></i>
                        </a>
                        <a href="#" class="action-item mr-2" data-toggle="tooltip" title="Move to trash">
                            <i class="fas fa-times"></i>
                        </a>
                    </div>
                </td>
            </tr>
            
            <tr class="table-divider"></tr>
            
            
            <tr>
                <th scope="row">
                    <div class="media align-items-center">
                        <img alt="Image placeholder" src="../../assets/img/theme/light/product-3.png" class="" style="width: 80px;">

                        <div class="media-body pl-3">
                            <div class="lh-100">
                                <span class="text-dark font-weight-bold mb-0">Adapt Earphones</span>
                            </div>
                            <span class="font-weight-bold text-muted">Size: L</span>
                        </div>
                    </div>
                </th>
                <td class="price">
                    $65 USD
                </td>
                <td>
                    <span class="badge badge-dot mr-4">
                      <i class="bg-"></i>
                      <span class="status">L</span>
                    </span>
                </td>
                <td>
                    <input type="text" class="form-control form-control-sm text-center" style="width: 80px;" value="1">
                </td>
                <td class="total">
                    $65 USD
                </td>
                <td class="text-right">
                    <!-- Actions -->
                    <div class="actions ml-3">
                        <a href="#" class="action-item mr-2" data-toggle="tooltip" title="Quick view">
                            <i class="fas fa-external-link-alt"></i>
                        </a>
                        <a href="#" class="action-item mr-2" data-toggle="tooltip" title="Move to trash">
                            <i class="fas fa-times"></i>
                        </a>
                    </div>
                </td>
            </tr>
            
            <tr class="table-divider"></tr>
            
            
            <tr>
                <th scope="row">
                    <div class="media align-items-center">
                        <img alt="Image placeholder" src="../../assets/img/theme/light/product-4.png" class="" style="width: 80px;">

                        <div class="media-body pl-3">
                            <div class="lh-100">
                                <span class="text-dark font-weight-bold mb-0">Smart Pixel 3</span>
                            </div>
                            <span class="font-weight-bold text-muted">Size: 40</span>
                        </div>
                    </div>
                </th>
                <td class="price">
                    $299 USD
                </td>
                <td>
                    <span class="badge badge-dot mr-4">
                      <i class="bg-"></i>
                      <span class="status">40</span>
                    </span>
                </td>
                <td>
                    <input type="text" class="form-control form-control-sm text-center" style="width: 80px;" value="1">
                </td>
                <td class="total">
                    $299 USD
                </td>
                <td class="text-right">
                    <!-- Actions -->
                    <div class="actions ml-3">
                        <a href="#" class="action-item mr-2" data-toggle="tooltip" title="Quick view">
                            <i class="fas fa-external-link-alt"></i>
                        </a>
                        <a href="#" class="action-item mr-2" data-toggle="tooltip" title="Move to trash">
                            <i class="fas fa-times"></i>
                        </a>
                    </div>
                </td>
            </tr>
            
            
        </tbody>
    </table>
</div>