Tables

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

Examples

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>
                      
                    

Table head options

Similar to tables and dark tables, use the modifier classes .thead-light or .thead-dark to make <thead>s appear light or dark gray.

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

                        <table class="table">
                          <thead class="thead-light">
                            <tr>
                              <th scope="col">#</th>
                              <th scope="col">First</th>
                              <th scope="col">Last</th>
                              <th scope="col">Handle</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <th scope="row">1</th>
                              <td>Mark</td>
                              <td>Otto</td>
                              <td>@mdo</td>
                            </tr>
                            <tr>
                              <th scope="row">2</th>
                              <td>Jacob</td>
                              <td>Thornton</td>
                              <td>@fat</td>
                            </tr>
                            <tr>
                              <th scope="row">3</th>
                              <td>Larry</td>
                              <td>the Bird</td>
                              <td>@twitter</td>
                            </tr>
                          </tbody>
                        </table>
                      
                    

Striped rows

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

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

Bordered table

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
                      
                        <table class="table table-bordered">
                          <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 colspan="2">Larry the Bird</td>
                              <td>@twitter</td>
                            </tr>
                          </tbody>
                        </table>
                      
                    
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
                      
                        <table class="table table-bordered 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 colspan="2">Larry the Bird</td>
                              <td>@twitter</td>
                            </tr>
                          </tbody>
                        </table>
                      
                    

Light bordered table

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
                      
                        <table class="table table-bordered table-light-bordered">
                          <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 colspan="2">Larry the Bird</td>
                              <td>@twitter</td>
                            </tr>
                          </tbody>
                        </table>
                      
                    

Borderless table

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
                      
                        <table class="table table-borderless">
                          <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 colspan="2">Larry the Bird</td>
                              <td>@twitter</td>
                            </tr>
                          </tbody>
                        </table>
                      
                    

.table-borderless can also be used on dark tables.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
                      
                        <table class="table table-borderless 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 colspan="2">Larry the Bird</td>
                              <td>@twitter</td>
                            </tr>
                          </tbody>
                        </table>
                      
                    

Hoverable rows

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
                      
                        <table class="table table-hover">
                          <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 colspan="2">Larry the Bird</td>
                              <td>@twitter</td>
                            </tr>
                          </tbody>
                        </table>
                      
                    
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
                      
                        <table class="table table-hover 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 colspan="2">Larry the Bird</td>
                              <td>@twitter</td>
                            </tr>
                          </tbody>
                        </table>
                      
                    

Small table

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
                      
                        <table class="table table-sm">
                          <thead>
                            <tr>
                              <th scope="col">#</th>
                              <th scope="col">First</th>
                              <th scope="col">Last</th>
                              <th scope="col">Handle</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <th scope="row">1</th>
                              <td>Mark</td>
                              <td>Otto</td>
                              <td>@mdo</td>
                            </tr>
                            <tr>
                              <th scope="row">2</th>
                              <td>Jacob</td>
                              <td>Thornton</td>
                              <td>@fat</td>
                            </tr>
                            <tr>
                              <th scope="row">3</th>
                              <td colspan="2">Larry the Bird</td>
                              <td>@twitter</td>
                            </tr>
                          </tbody>
                        </table>
                      
                    
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
                      
                        <table class="table table-sm 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 colspan="2">Larry the Bird</td>
                              <td>@twitter</td>
                            </tr>
                          </tbody>
                        </table>
                      
                    

Contextual classes

Use contextual classes to color table rows or individual cells.

Class Heading Heading
Active Cell Cell
Default Cell Cell
Primary Cell Cell
Secondary Cell Cell
Success Cell Cell
Danger Cell Cell
Warning Cell Cell
Info Cell Cell
Light Cell Cell
Dark Cell Cell
                      
                        <table class="table">
                          <thead>
                            <tr>
                              <th scope="col">Class</th>
                              <th scope="col">Heading</th>
                              <th scope="col">Heading</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr class="table-active">
                              <th scope="row">Active</th>
                              <td>Cell</td>
                              <td>Cell</td>
                            </tr>
                            <tr>
                              <th scope="row">Default</th>
                              <td>Cell</td>
                              <td>Cell</td>
                            </tr>


                            <tr class="table-primary">
                              <th scope="row">Primary</th>
                              <td>Cell</td>
                              <td>Cell</td>
                            </tr>
                            <tr class="table-secondary">
                              <th scope="row">Secondary</th>
                              <td>Cell</td>
                              <td>Cell</td>
                            </tr>
                            <tr class="table-success">
                              <th scope="row">Success</th>
                              <td>Cell</td>
                              <td>Cell</td>
                            </tr>
                            <tr class="table-danger">
                              <th scope="row">Danger</th>
                              <td>Cell</td>
                              <td>Cell</td>
                            </tr>
                            <tr class="table-warning">
                              <th scope="row">Warning</th>
                              <td>Cell</td>
                              <td>Cell</td>
                            </tr>
                            <tr class="table-info">
                              <th scope="row">Info</th>
                              <td>Cell</td>
                              <td>Cell</td>
                            </tr>
                            <tr class="table-light">
                              <th scope="row">Light</th>
                              <td>Cell</td>
                              <td>Cell</td>
                            </tr>
                            <tr class="table-dark">
                              <th scope="row">Dark</th>
                              <td>Cell</td>
                              <td>Cell</td>
                            </tr>
                          </tbody>
                        </table>
                      
                    

Regular table background variants are not available with the dark table, however, you may use text or background utilities to achieve similar styles.

# Heading Heading
1 Cell Cell
2 Cell Cell
3 Cell Cell
4 Cell Cell
5 Cell Cell
6 Cell Cell
7 Cell Cell
8 Cell Cell
9 Cell Cell
                      
                        <table class="table table-dark">
                          <thead>
                            <tr>
                              <th scope="col">#</th>
                              <th scope="col">Heading</th>
                              <th scope="col">Heading</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr class="bg-primary">
                              <th scope="row">1</th>
                              <td>Cell</td>
                              <td>Cell</td>
                            </tr>
                            <tr>
                              <th scope="row">2</th>
                              <td>Cell</td>
                              <td>Cell</td>
                            </tr>
                            <tr class="bg-success">
                              <th scope="row">3</th>
                              <td>Cell</td>
                              <td>Cell</td>
                            </tr>
                            <tr>
                              <th scope="row">4</th>
                              <td>Cell</td>
                              <td>Cell</td>
                            </tr>
                            <tr class="bg-info">
                              <th scope="row">5</th>
                              <td>Cell</td>
                              <td>Cell</td>
                            </tr>
                            <tr>
                              <th scope="row">6</th>
                              <td>Cell</td>
                              <td>Cell</td>
                            </tr>
                            <tr class="bg-warning">
                              <th scope="row">7</th>
                              <td>Cell</td>
                              <td>Cell</td>
                            </tr>
                            <tr>
                              <th scope="row">8</th>
                              <td>Cell</td>
                              <td>Cell</td>
                            </tr>
                            <tr class="bg-danger">
                              <th scope="row">9</th>
                              <td>Cell</td>
                              <td>Cell</td>
                            </tr>
                          </tbody>
                        </table>
                      
                    

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

Create responsive tables by wrapping any .table with .table-responsive{-sm|-md|-lg|-xl}, making the table scroll horizontally at each max-width breakpoint of up to (but not including) 576px, 768px, 992px, and 1120px, respectively.

Note

Note that since browsers do not currently support range context queries , we work around the limitations of min- and max- prefixes and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.

Captions

A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.

List of users
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
                      
                        <table class="table">
                          <caption>List of users</caption>
                          <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>
                      
                    

Responsive tables

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.

Always responsive

Across every breakpoint, use .table-responsive for horizontally scrolling tables.

# 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
                      
                        <div class="table-responsive">
                          <table class="table">
                          </table>
                        </div>
                      
                    

Breakpoint specific

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
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell
# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell
# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell
# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell
                      
                        <div class="table-responsive-sm">
                          <table class="table">
                          </table>
                        </div>

                        <div class="table-responsive-md">
                          <table class="table">
                          </table>
                        </div>

                        <div class="table-responsive-lg">
                          <table class="table">
                          </table>
                        </div>

                        <div class="table-responsive-xl">
                          <table class="table">
                          </table>
                        </div>
                      
                    

Front examples

# Client Amount Date Status
1
Image Description Monica
$9.00 05 May Rejected
2
Image Description Jacob
$257.93 12 May Completed
3
Image Description Conor
$441.99 15 May Completed
4
Image Description Victoria
$84.01 27 May Pending
                      
                        <table class="table table-light">
                          <thead>
                            <tr>
                              <th scope="col" style="width: 8%;">#</th>
                              <th scope="col">Client</th>
                              <th scope="col">Amount</th>
                              <th scope="col">Date</th>
                              <th scope="col">Status</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <th scope="row">
                                <span class="btn btn-sm btn-icon btn-soft-secondary rounded-circle mr-2">
                                  <span class="btn-icon__inner font-weight-medium">1</span>
                                </span>
                              </th>
                              <td class="align-middle">
                                <div class="media align-items-center">
                                  <span class="u-sm-avatar mr-2">
                                    <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img3.jpg" alt="Image Description">
                                  </span>
                                  <span>Monica</span>
                                </div>
                              </td>
                              <td class="align-middle text-primary">$9.00</td>
                              <td class="align-middle text-secondary">05 May</td>
                              <td class="align-middle">
                                <span class="badge badge-danger">Rejected</span>
                              </td>
                            </tr>

                            <tr>
                              <th scope="row">
                                <span class="btn btn-sm btn-icon btn-soft-secondary rounded-circle mr-2">
                                  <span class="btn-icon__inner font-weight-medium">2</span>
                                </span>
                              </th>
                              <td class="align-middle">
                                <div class="media align-items-center">
                                  <span class="u-sm-avatar mr-2">
                                    <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img9.jpg" alt="Image Description">
                                  </span>
                                  <span>Jacob</span>
                                </div>
                              </td>
                              <td class="align-middle text-primary">$257.93</td>
                              <td class="align-middle text-secondary">12 May</td>
                              <td class="align-middle">
                                <span class="badge badge-success">Completed</span>
                              </td>
                            </tr>

                            <tr>
                              <th scope="row">
                                <span class="btn btn-sm btn-icon btn-soft-secondary rounded-circle mr-2">
                                  <span class="btn-icon__inner font-weight-medium">3</span>
                                </span>
                              </th>
                              <td class="align-middle">
                                <div class="media align-items-center">
                                  <span class="u-sm-avatar mr-2">
                                    <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img8.jpg" alt="Image Description">
                                  </span>
                                  <span>Conor</span>
                                </div>
                              </td>
                              <td class="align-middle text-primary">$441.99</td>
                              <td class="align-middle text-secondary">15 May</td>
                              <td class="align-middle">
                                <span class="badge badge-success">Completed</span>
                              </td>
                            </tr>

                            <tr>
                              <th scope="row">
                                <span class="btn btn-sm btn-icon btn-soft-secondary rounded-circle mr-2">
                                  <span class="btn-icon__inner font-weight-medium">3</span>
                                </span>
                              </th>
                              <td class="align-middle">
                                <div class="media align-items-center">
                                  <span class="u-sm-avatar mr-2">
                                    <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img5.jpg" alt="Image Description">
                                  </span>
                                  <span>Victoria</span>
                                </div>
                              </td>
                              <td class="align-middle text-primary">$84.01</td>
                              <td class="align-middle text-secondary">27 May</td>
                              <td class="align-middle">
                                <span class="badge badge-warning">Pending</span>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      
                    
Event Date Location Seats Attending
25 Aug, 2018 12PM - 01AM 728 Dooley Branch,
Beckershire, LA 63598-2909
98 of 200
31 Aug, 2018 06AM - 06:30AM 622 Dixie Path,
South Tobinchester, UT 98336
7 of 20
04 Sep, 2018 03PM - 05AM 153 Williamson Plaza,
Maggieberg, MT 09514
41 of 74
11 Sep, 2018 02PM - 03AM 5078 Jensen Key,
Port Kaya, WV 73505
55 of 155
                      
                        <table class="table table-light">
                          <thead>
                            <tr>
                              <th scope="col">Event</th>
                              <th scope="col">Date</th>
                              <th scope="col">Location</th>
                              <th scope="col">Seats</th>
                              <th scope="col">Attending</th>
                              <th scope="col"></th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <th scope="row" class="align-middle">
                                <div class="custom-control custom-checkbox d-flex align-items-center text-primary font-weight-medium">
                                  <input type="checkbox" class="custom-control-input" id="eventCheckbox01">
                                  <label class="custom-control-label" for="eventCheckbox01">Webinar</label>
                                </div>
                              </th>
                              <td class="align-middle text-secondary">
                                <small class="d-block">25 Aug, 2018</small>
                                <small class="d-block">12PM - 01AM</small>
                              </td>
                              <td class="align-middle text-secondary">
                                <small class="d-block">728 Dooley Branch,<br>Beckershire, LA 63598-2909</small>
                              </td>
                              <td class="align-middle text-secondary small">
                                <span class="fas fa-chair mr-2"></span>
                                98 of 200
                              </td>
                              <td class="align-middle">
                                <button type="button" class="btn btn-xs btn-icon btn-soft-primary transition-3d-hover">
                                  <span class="fas fa-check btn-icon__inner"></span>
                                </button>
                                <button type="button" class="btn btn-xs btn-icon btn-soft-danger transition-3d-hover">
                                  <span class="fas fa-times btn-icon__inner"></span>
                                </button>
                              </td>
                              <td class="align-middle text-secondary">
                                <a class="btn btn-xs btn-icon btn-soft-secondary transition-3d-hover" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Edit">
                                  <span class="fas fa-pen btn-icon__inner"></span>
                                </a>
                              </td>
                            </tr>

                            <tr>
                              <th scope="row" class="align-middle">
                                <div class="custom-control custom-checkbox d-flex align-items-center text-primary font-weight-medium">
                                  <input type="checkbox" class="custom-control-input" id="eventCheckbox02" checked>
                                  <label class="custom-control-label" for="eventCheckbox02">Slack conference</label>
                                </div>
                              </th>
                              <td class="align-middle text-secondary">
                                <small class="d-block">31 Aug, 2018</small>
                                <small class="d-block">06AM - 06:30AM</small>
                              </td>
                              <td class="align-middle text-secondary">
                                <small class="d-block">622 Dixie Path,<br>South Tobinchester, UT 98336</small>
                              </td>
                              <td class="align-middle text-secondary small">
                                <span class="fas fa-chair mr-2"></span>
                                7 of 20
                              </td>
                              <td class="align-middle">
                                <button type="button" class="btn btn-xs btn-icon btn-primary">
                                  <span class="fas fa-check btn-icon__inner"></span>
                                </button>
                                <button type="button" class="btn btn-xs btn-icon btn-soft-danger" disabled>
                                  <span class="fas fa-times btn-icon__inner"></span>
                                </button>
                              </td>
                              <td class="align-middle text-secondary">
                                <a class="btn btn-xs btn-icon btn-soft-secondary transition-3d-hover" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Edit">
                                  <span class="fas fa-pen btn-icon__inner"></span>
                                </a>
                              </td>
                            </tr>

                            <tr>
                              <th scope="row" class="align-middle">
                                <div class="custom-control custom-checkbox d-flex align-items-center text-primary font-weight-medium">
                                  <input type="checkbox" class="custom-control-input" id="eventCheckbox03" checked>
                                  <label class="custom-control-label" for="eventCheckbox03">Dropbox</label>
                                </div>
                              </th>
                              <td class="align-middle text-secondary">
                                <small class="d-block">04 Sep, 2018</small>
                                <small class="d-block">03PM - 05AM</small>
                              </td>
                              <td class="align-middle text-secondary">
                                <small class="d-block">153 Williamson Plaza,<br>Maggieberg, MT 09514</small>
                              </td>
                              <td class="align-middle text-secondary small">
                                <span class="fas fa-chair mr-2"></span>
                                41 of 74
                              </td>
                              <td class="align-middle">
                                <button type="button" class="btn btn-xs btn-icon btn-primary">
                                  <span class="fas fa-check btn-icon__inner"></span>
                                </button>
                                <button type="button" class="btn btn-xs btn-icon btn-soft-danger" disabled>
                                  <span class="fas fa-times btn-icon__inner"></span>
                                </button>
                              </td>
                              <td class="align-middle text-secondary">
                                <a class="btn btn-xs btn-icon btn-soft-secondary transition-3d-hover" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Edit">
                                  <span class="fas fa-pen btn-icon__inner"></span>
                                </a>
                              </td>
                            </tr>

                            <tr>
                              <th scope="row" class="align-middle">
                                <div class="custom-control custom-checkbox d-flex align-items-center text-primary font-weight-medium">
                                  <input type="checkbox" class="custom-control-input" id="eventCheckbox04">
                                  <label class="custom-control-label" for="eventCheckbox04">InVision live</label>
                                </div>
                              </th>
                              <td class="align-middle text-secondary">
                                <small class="d-block">11 Sep, 2018</small>
                                <small class="d-block">02PM - 03AM</small>
                              </td>
                              <td class="align-middle text-secondary">
                                <small class="d-block">5078 Jensen Key,<br>Port Kaya, WV 73505</small>
                              </td>
                              <td class="align-middle text-secondary small">
                                <span class="fas fa-chair mr-2"></span>
                                55 of 155
                              </td>
                              <td class="align-middle">
                                <button type="button" class="btn btn-xs btn-icon btn-soft-primary transition-3d-hover">
                                  <span class="fas fa-check btn-icon__inner"></span>
                                </button>
                                <button type="button" class="btn btn-xs btn-icon btn-soft-danger transition-3d-hover">
                                  <span class="fas fa-times btn-icon__inner"></span>
                                </button>
                              </td>
                              <td class="align-middle text-secondary">
                                <a class="btn btn-xs btn-icon btn-soft-secondary transition-3d-hover" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Edit">
                                  <span class="fas fa-pen btn-icon__inner"></span>
                                </a>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      
                    
Task Project Priority Due date Status
Home page redesign Spotify Highest 25 Jul In progress
Logo branding Dropbox Medium 12 Aug In progress
Website redesign Google High 15 Aug Completed
Home page redesign FrontApp Medium 01 Aug Completed
SEO optimization Slack Lowest 02 Aug On hold
Branding Spotify High 05 Sep In progress
Logo redesign Htmlstream High 15 Sep Completed
Website redesign GitHub Low 16 Sep On hold
                      
                        <table class="table table-light">
                          <thead>
                            <tr>
                              <th scope="col">Task</th>
                              <th scope="col">Project</th>
                              <th scope="col">Priority</th>
                              <th scope="col">Due date</th>
                              <th scope="col">Status</th>
                              <th scope="col"></th>
                            </tr>
                          </thead>
                          <tbody class="font-size-1">
                            <tr>
                              <td class="align-middle font-weight-normal">Home page redesign</td>
                              <td class="align-middle">Spotify</td>
                              <td class="align-middle text-danger">
                                <span class="fas fa-arrow-up mr-1"></span>
                                Highest
                              </td>
                              <td class="align-middle">25 Jul</td>
                              <td class="align-middle">
                                <span class="fas fa-circle text-primary small mr-1"></span>
                                In progress
                              </td>
                            </tr>

                            <tr>
                              <td class="align-middle font-weight-normal">Logo branding</td>
                              <td class="align-middle">Dropbox</td>
                              <td class="align-middle text-warning">
                                <span class="fas fa-arrow-up mr-1"></span>
                                Medium
                              </td>
                              <td class="align-middle">12 Aug</td>
                              <td class="align-middle">
                                <span class="fas fa-circle text-primary small mr-1"></span>
                                In progress
                              </td>
                            </tr>

                            <tr>
                              <td class="align-middle font-weight-normal">Website redesign</td>
                              <td class="align-middle">Google</td>
                              <td class="align-middle text-danger">
                                <span class="fas fa-arrow-up mr-1"></span>
                                High
                              </td>
                              <td class="align-middle">15 Aug</td>
                              <td class="align-middle">
                                <span class="fas fa-circle text-success small mr-1"></span>
                                Completed
                              </td>
                            </tr>

                            <tr>
                              <td class="align-middle font-weight-normal">Home page redesign</td>
                              <td class="align-middle">FrontApp</td>
                              <td class="align-middle text-warning">
                                <span class="fas fa-arrow-up mr-1"></span>
                                Medium
                              </td>
                              <td class="align-middle">01 Aug</td>
                              <td class="align-middle">
                                <span class="fas fa-circle text-success small mr-1"></span>
                                Completed
                              </td>
                            </tr>

                            <tr>
                              <td class="align-middle font-weight-normal">SEO optimization</td>
                              <td class="align-middle">Slack</td>
                              <td class="align-middle text-success">
                                <span class="fas fa-arrow-down mr-1"></span>
                                Lowest
                              </td>
                              <td class="align-middle">02 Aug</td>
                              <td class="align-middle">
                                <span class="fas fa-circle text-warning small mr-1"></span>
                                On hold
                              </td>
                            </tr>

                            <tr>
                              <td class="align-middle font-weight-normal">Branding</td>
                              <td class="align-middle">Spotify</td>
                              <td class="align-middle text-danger">
                                <span class="fas fa-arrow-up mr-1"></span>
                                High
                              </td>
                              <td class="align-middle">05 Sep</td>
                              <td class="align-middle">
                                <span class="fas fa-circle text-primary small mr-1"></span>
                                In progress
                              </td>
                            </tr>

                            <tr>
                              <td class="align-middle font-weight-normal">Logo redesign</td>
                              <td class="align-middle">Htmlstream</td>
                              <td class="align-middle text-danger">
                                <span class="fas fa-arrow-up mr-1"></span>
                                High
                              </td>
                              <td class="align-middle">15 Sep</td>
                              <td class="align-middle">
                                <span class="fas fa-circle text-success small mr-1"></span>
                                Completed
                              </td>
                            </tr>

                            <tr>
                              <td class="align-middle font-weight-normal">Website redesign</td>
                              <td class="align-middle">GitHub</td>
                              <td class="align-middle text-success">
                                <span class="fas fa-arrow-down mr-1"></span>
                                Low
                              </td>
                              <td class="align-middle">16 Sep</td>
                              <td class="align-middle">
                                <span class="fas fa-circle text-warning small mr-1"></span>
                                On hold
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      
                    
Contact Us