Activity Stream
Report-Fix / Update

Add 3 files to Tasks

Monday , 4:24 PM
Project Status

Marked Design as Completed

Monday , 3:00 PM
UI
Larkon Application UI v2.0.0 Latest

Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.

Monday , 2:10 PM
avatar-5
Alex Smith Attached Photos
Monday 1:00 PM
avatar-5
Rebecca J. added a new team member

Added a new member to Front Dashboard

Monday 10:00 AM
Achievements

Earned a " Best Product Award"

Monday 9:30 AM
View All
Theme Settings
Color Scheme
Topbar Color
Menu Color
Sidebar Size
Basic Example #

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

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

Use contextual classes to color tables, table rows or individual cells.

Class Heading Heading
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
html
                                                       
                                                            <table class="table">
                                                                 <thead>
                                                                      <tr>
                                                                           <th scope="col">Class</th>
                                                                           <th scope="col">Heading</th>
                                                                           <th scope="col">Heading</th>
                                                                      </tr>
                                                                 </thead>
                                                                 <tbody>
                                                                      <tr>
                                                                           <td>Default</td>
                                                                           <td>Cell</td>
                                                                           <td>Cell</td>
                                                                      </tr>

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

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 Simsons @twitter
html
                                                       
                                                            <table class="table table-striped table-centered">
                                                                 <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>
                                                                           <td>1</td>
                                                                           <td>Mark</td>
                                                                           <td>Otto</td>
                                                                           <td>@mdo</td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>2</td>
                                                                           <td>Jacob</td>
                                                                           <td>Thornton</td>
                                                                           <td>@fat</td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>3</td>
                                                                           <td>Larry the Bird</td>
                                                                           <td> Simsons</td>
                                                                           <td>@twitter</td>
                                                                      </tr>
                                                                 </tbody>
                                                            </table>
                                                       
                                                  
Striped Rows Table Dark #

Use .table-dark .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 Simsons @twitter
html
                                                       
                                                            <table class="table table-dark table-striped table-centered">
                                                                 <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>
                                                                           <td>1</td>
                                                                           <td>Mark</td>
                                                                           <td>Otto</td>
                                                                           <td>@mdo</td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>2</td>
                                                                           <td>Jacob</td>
                                                                           <td>Thornton</td>
                                                                           <td>@fat</td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>3</td>
                                                                           <td>Larry the Bird</td>
                                                                           <td> Simsons</td>
                                                                           <td>@twitter</td>
                                                                      </tr>
                                                                 </tbody>
                                                            </table>
                                                       
                                                  
Striped Rows Table Success #

Use .table-success .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 Simsons @twitter
html
                                                       
                                                            <table class="table table-success table-striped table-centered">
                                                                 <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>
                                                                           <td>1</td>
                                                                           <td>Mark</td>
                                                                           <td>Otto</td>
                                                                           <td>@mdo</td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>2</td>
                                                                           <td>Jacob</td>
                                                                           <td>Thornton</td>
                                                                           <td>@fat</td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>3</td>
                                                                           <td>Larry the Bird</td>
                                                                           <td> Simsons</td>
                                                                           <td>@twitter</td>
                                                                      </tr>
                                                                 </tbody>
                                                            </table>
                                                       
                                                  
Striped columns #

Use .table-striped-columns to add zebra-striping to any table column.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Simsons @twitter
html
                                                       
                                                            <table class="table table-striped-columns table-centered">
                                                                 <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>
                                                                           <td>1</td>
                                                                           <td>Mark</td>
                                                                           <td>Otto</td>
                                                                           <td>@mdo</td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>2</td>
                                                                           <td>Jacob</td>
                                                                           <td>Thornton</td>
                                                                           <td>@fat</td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>3</td>
                                                                           <td>Larry the Bird</td>
                                                                           <td>Simsons</td>
                                                                           <td>@twitter</td>
                                                                      </tr>
                                                                 </tbody>
                                                            </table>
                                                       
                                                  
Striped columns Dark#

Use .table-dark .table-striped-columns to add zebra-striping to any table column.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Simsons @twitter
html
                                                       
                                                            <table class="table table-dark table-striped-columns table-centered">
                                                                 <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>
                                                                           <td>1</td>
                                                                           <td>Mark</td>
                                                                           <td>Otto</td>
                                                                           <td>@mdo</td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>2</td>
                                                                           <td>Jacob</td>
                                                                           <td>Thornton</td>
                                                                           <td>@fat</td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>3</td>
                                                                           <td>Larry the Bird</td>
                                                                           <td>Simsons</td>
                                                                           <td>@twitter</td>
                                                                      </tr>
                                                                 </tbody>
                                                            </table>
                                                       
                                                  
Striped columns Dark#

Use .table-success .table-striped-columns to add zebra-striping to any table column.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Simsons @twitter
html
                                                       
                                                            <table class="table table-success table-striped-columns table-centered">
                                                                 <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>
                                                                           <td>1</td>
                                                                           <td>Mark</td>
                                                                           <td>Otto</td>
                                                                           <td>@mdo</td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>2</td>
                                                                           <td>Jacob</td>
                                                                           <td>Thornton</td>
                                                                           <td>@fat</td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>3</td>
                                                                           <td>Larry the Bird</td>
                                                                           <td>Simsons</td>
                                                                           <td>@twitter</td>
                                                                      </tr>
                                                                 </tbody>
                                                            </table>
                                                       
                                                  
Hoverable rows #

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

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

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

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

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Simsons @twitter
html
                                                       
                                                            <table class="table table-centered">
                                                                 <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 class="table-active">
                                                                           <td>1</td>
                                                                           <td>Mark</td>
                                                                           <td>Otto</td>
                                                                           <td>@mdo</td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>2</td>
                                                                           <td>Jacob</td>
                                                                           <td>Thornton</td>
                                                                           <td>@fat</td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>3</td>
                                                                           <td class="table-active">Larry the Bird</td>
                                                                           <td>Simsons</td>
                                                                           <td>@twitter</td>
                                                                      </tr>
                                                                 </tbody>
                                                            </table>
                                                       
                                                  
Active Tables Dark#

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Simsons @twitter
html
                                                       
                                                            <table class="table table-dark table-centered">
                                                                 <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 class="table-active">
                                                                           <td>1</td>
                                                                           <td>Mark</td>
                                                                           <td>Otto</td>
                                                                           <td>@mdo</td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>2</td>
                                                                           <td>Jacob</td>
                                                                           <td>Thornton</td>
                                                                           <td>@fat</td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>3</td>
                                                                           <td class="table-active">Larry the Bird</td>
                                                                           <td>Simsons</td>
                                                                           <td>@twitter</td>
                                                                      </tr>
                                                                 </tbody>
                                                            </table>
                                                       
                                                  
Bordered Table #

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Simsons @twitter
html
                                                       
                                                            <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>
                                                                           <td>1</td>
                                                                           <td>Mark</td>
                                                                           <td>Otto</td>
                                                                           <td>@mdo</td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>2</td>
                                                                           <td>Jacob</td>
                                                                           <td>Thornton</td>
                                                                           <td>@fat</td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>3</td>
                                                                           <td>Larry the Bird</td>
                                                                           <td>Simsons</td>
                                                                           <td>@twitter</td>
                                                                      </tr>
                                                                 </tbody>
                                                            </table>
                                                       
                                                  
Bordered color Table #

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Simsons @twitter
html
                                                       
                                                            <table class="table table-bordered border-primary table-centered">
                                                                 <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>
                                                                           <td>1</td>
                                                                           <td>Mark</td>
                                                                           <td>Otto</td>
                                                                           <td>@mdo</td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>2</td>
                                                                           <td>Jacob</td>
                                                                           <td>Thornton</td>
                                                                           <td>@fat</td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>3</td>
                                                                           <td>Larry the Bird</td>
                                                                           <td>Simsons</td>
                                                                           <td>@twitter</td>
                                                                      </tr>
                                                                 </tbody>
                                                            </table>
                                                       
                                                  
Tables without borders #

Add .table-borderless for a table without borders..

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

Add .table-borderless .table-dark for a table without borders and dark table.

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

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Simsons @twitter
html
                                                       
                                                            <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>
                                                                           <td>1</td>
                                                                           <td>Mark</td>
                                                                           <td>Otto</td>
                                                                           <td>@mdo</td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>2</td>
                                                                           <td>Jacob</td>
                                                                           <td>Thornton</td>
                                                                           <td>@fat</td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>3</td>
                                                                           <td>Larry the Bird</td>
                                                                           <td>Simsons</td>
                                                                           <td>@twitter</td>
                                                                      </tr>
                                                                 </tbody>
                                                            </table>
                                                       
                                                  
Small Tables Dark#

Add .table-sm .table-dark to make any .table more compact by cutting all cell padding in half.

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

Add a thicker border, darker between table groups—<thead>, <tbody>, and <tfoot>—with .table-group-divider. Customize the color by changing the border-top-color (which we don’t currently provide a utility class for at this time).

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

Table cells of <thead> are always vertical aligned to the bottom. Table cells in <tbody> inherit their alignment from <table> and are aligned to the top by default. Use the vertical align classes to re-align where needed.

Heading 1 Heading 2 Heading 3 Heading 4
This cell inherits vertical-align: middle; from the table This cell inherits vertical-align: middle; from the table This cell inherits vertical-align: middle; from the table This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits vertical-align: bottom; from the table row This cell inherits vertical-align: bottom; from the table row This cell inherits vertical-align: bottom; from the table row This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits vertical-align: middle; from the table This cell inherits vertical-align: middle; from the table This cell is aligned to the top. This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
html
                                                            
                                                                 <table class="table align-middle table-centered">
                                                                      <thead>
                                                                           <tr>
                                                                                <th scope="col" class="w-25">Heading 1</th>
                                                                                <th scope="col" class="w-25">Heading 2</th>
                                                                                <th scope="col" class="w-25">Heading 3</th>
                                                                                <th scope="col" class="w-25">Heading 4</th>
                                                                           </tr>
                                                                      </thead>
                                                                      <tbody>
                                                                           <tr>
                                                                                <td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
                                                                                <td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
                                                                                <td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
                                                                                <td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</td>
                                                                           </tr>
                                                                           <tr class="align-bottom">
                                                                                <td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td>
                                                                                <td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td>
                                                                                <td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td>
                                                                                <td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</td>
                                                                           </tr>
                                                                           <tr>
                                                                                <td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
                                                                                <td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
                                                                                <td class="align-top">This cell is aligned to the top.</td>
                                                                                <td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</td>
                                                                           </tr>
                                                                      </tbody>
                                                                 </table>
                                                            
                                                       
Nesting Table #

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

# First Last Handle
1 Mark Otto @mdo
Header Header Header
A First Last
B First Last
C First Last
3 Larry the Bird @twitter
html
                                                       
                                                            <table class="table table-bordered table-striped table-centered">
                                                                 <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>
                                                                           <td>1</td>
                                                                           <td>Mark</td>
                                                                           <td>Otto</td>
                                                                           <td>@mdo</td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td colspan="4">
                                                                                <table class="table mb-0">
                                                                                     <thead>
                                                                                          <tr>
                                                                                               <th scope="col">Header</th>
                                                                                               <th scope="col">Header</th>
                                                                                               <th scope="col">Header</th>
                                                                                          </tr>
                                                                                     </thead>
                                                                                     <tbody>
                                                                                          <tr>
                                                                                               <td>A</td>
                                                                                               <td>First</td>
                                                                                               <td>Last</td>
                                                                                          </tr>
                                                                                          <tr>
                                                                                               <td>B</td>
                                                                                               <td>First</td>
                                                                                               <td>Last</td>
                                                                                          </tr>
                                                                                          <tr>
                                                                                               <td>C</td>
                                                                                               <td>First</td>
                                                                                               <td>Last</td>
                                                                                          </tr>
                                                                                     </tbody>
                                                                                </table>
                                                                           </td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>3</td>
                                                                           <td>Larry</td>
                                                                           <td>the Bird</td>
                                                                           <td>@twitter</td>
                                                                      </tr>
                                                                 </tbody>
                                                            </table>
                                                       
                                                  
Table head #

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

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

Similar to tables and dark tables, use the modifier classes .table-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
html
                                                       
                                                            <table class="table table-centered">
                                                                 <thead class="table-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>
                                                                           <td>1</td>
                                                                           <td>Mark</td>
                                                                           <td>Otto</td>
                                                                           <td>@mdo</td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>2</td>
                                                                           <td>Jacob</td>
                                                                           <td>Thornton</td>
                                                                           <td>@fat</td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>3</td>
                                                                           <td>Larry</td>
                                                                           <td>the Bird</td>
                                                                           <td>@twitter</td>
                                                                      </tr>
                                                                 </tbody>
                                                            </table>
                                                       
                                                  
Table foot#
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Footer Footer Footer Footer
html
                                                       
                                                            <table class="table table-centered">
                                                                 <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>
                                                                           <td>1</td>
                                                                           <td>Mark</td>
                                                                           <td>Otto</td>
                                                                           <td>@mdo</td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>2</td>
                                                                           <td>Jacob</td>
                                                                           <td>Thornton</td>
                                                                           <td>@fat</td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>3</td>
                                                                           <td>Larry</td>
                                                                           <td>the Bird</td>
                                                                           <td>@twitter</td>
                                                                      </tr>
                                                                 </tbody>
                                                                 <tfoot>
                                                                      <tr>
                                                                           <td>Footer</td>
                                                                           <td>Footer</td>
                                                                           <td>Footer</td>
                                                                           <td>Footer</td>
                                                                      </tr>
                                                                 </tfoot>
                                                            </table>
                                                       
                                                  
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 Simsons @twitter
html
                                                       
                                                            <table class="table table-centered">
                                                                 <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>
                                                                           <td>1</td>
                                                                           <td>Mark</td>
                                                                           <td>Otto</td>
                                                                           <td>@mdo</td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>2</td>
                                                                           <td>Jacob</td>
                                                                           <td>Thornton</td>
                                                                           <td>@fat</td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>3</td>
                                                                           <td>Larry the Bird</td>
                                                                           <td>Simsons</td>
                                                                           <td>@twitter</td>
                                                                      </tr>
                                                                 </tbody>
                                                            </table>
                                                       
                                                  
Captions#

You can also put the <caption> on the top of the table with .caption-top

List of users
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
html
                                                       
                                                            <table class="table caption-top table-centered">
                                                                 <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>
                                                                           <td>1</td>
                                                                           <td>Mark</td>
                                                                           <td>Otto</td>
                                                                           <td>@mdo</td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>2</td>
                                                                           <td>Jacob</td>
                                                                           <td>Thornton</td>
                                                                           <td>@fat</td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>3</td>
                                                                           <td>Larry</td>
                                                                           <td>the Bird</td>
                                                                           <td>@twitter</td>
                                                                      </tr>
                                                                 </tbody>
                                                            </table>
                                                       
                                                  
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
html
                                                       
                                                            <div class="table-responsive">
                                                                 <table class="table">
                                                                      <thead>
                                                                           <tr>
                                                                                <th scope="col">#</th>
                                                                                <th scope="col">Heading</th>
                                                                                <th scope="col">Heading</th>
                                                                                <th scope="col">Heading</th>
                                                                                <th scope="col">Heading</th>
                                                                                <th scope="col">Heading</th>
                                                                                <th scope="col">Heading</th>
                                                                                <th scope="col">Heading</th>
                                                                                <th scope="col">Heading</th>
                                                                                <th scope="col">Heading</th>
                                                                           </tr>
                                                                      </thead>
                                                                      <tbody>
                                                                           <tr>
                                                                                <td>1</td>
                                                                                <td>Cell</td>
                                                                                <td>Cell</td>
                                                                                <td>Cell</td>
                                                                                <td>Cell</td>
                                                                                <td>Cell</td>
                                                                                <td>Cell</td>
                                                                                <td>Cell</td>
                                                                                <td>Cell</td>
                                                                                <td>Cell</td>
                                                                           </tr>
                                                                           <tr>
                                                                                <td>2</td>
                                                                                <td>Cell</td>
                                                                                <td>Cell</td>
                                                                                <td>Cell</td>
                                                                                <td>Cell</td>
                                                                                <td>Cell</td>
                                                                                <td>Cell</td>
                                                                                <td>Cell</td>
                                                                                <td>Cell</td>
                                                                                <td>Cell</td>
                                                                           </tr>
                                                                           <tr>
                                                                                <td>3</td>
                                                                                <td>Cell</td>
                                                                                <td>Cell</td>
                                                                                <td>Cell</td>
                                                                                <td>Cell</td>
                                                                                <td>Cell</td>
                                                                                <td>Cell</td>
                                                                                <td>Cell</td>
                                                                                <td>Cell</td>
                                                                                <td>Cell</td>
                                                                           </tr>
                                                                      </tbody>
                                                                 </table>
                                                            </div>
                                                       
                                                  
With avatars #

A list of all the users in your account including their name, title, email and role.

Name Title Email Role Action
Tony M. Carter
Designer tonymcarter@jourrapide.com Member Edit
James E. Chamb
UI/UX Designer jamesechambliss@teleworm.us Admin Edit
Charlotte J. Torres
Copywriter charlotte@jourrapide.com Member Edit
Mary J. Germain
Full Stack maryjgermain@jourrapide.com CEO Edit
Kevin C. Reyes
Director of Product kevincreyes@jourrapide.com Member Edit
html
                                                       
                                                            <table class="table table-hover table-centered">
                                                                 <thead class="table-light">
                                                                      <tr>
                                                                           <th scope="col">Name</th>
                                                                           <th scope="col">Title</th>
                                                                           <th scope="col">Email</th>
                                                                           <th scope="col">Role</th>
                                                                           <th scope="col">Action</th>
                                                                      </tr>
                                                                 </thead>
                                                                 <tbody>
                                                                      <tr>
                                                                           <td>
                                                                                <div class="d-flex align-items-center gap-1">
                                                                                     <img src="assets/images/users/avatar-2.jpg" alt="" class="avatar-sm rounded-circle">
                                                                                     <div class="d-block">
                                                                                          <h5 class="mb-0"> Tony M. Carter</h5>
                                                                                     </div>
                                                                                </div>
                                                                           </td>
                                                                           <td>Designer</td>
                                                                           <td>tonymcarter@jourrapide.com</td>
                                                                           <td>Member</td>
                                                                           <td><a href="#!" class="btn btn-primary btn-sm w-100">Edit</a></td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>
                                                                                <div class="d-flex align-items-center gap-1">
                                                                                     <img src="assets/images/users/avatar-1.jpg" alt="" class="avatar-sm rounded-circle">
                                                                                     <div class="d-block">
                                                                                          <h5 class="mb-0">James E. Chamb</h5>
                                                                                     </div>
                                                                                </div>
                                                                           </td>
                                                                           <td>UI/UX Designer</td>
                                                                           <td>jamesechambliss@teleworm.us</td>
                                                                           <td>Admin</td>
                                                                           <td><a href="#!" class="btn btn-primary btn-sm w-100">Edit</a></td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>
                                                                                <div class="d-flex align-items-center gap-1">
                                                                                     <img src="assets/images/users/avatar-4.jpg" alt="" class="avatar-sm rounded-circle">
                                                                                     <div class="d-block">
                                                                                          <h5 class="mb-0">Charlotte J. Torres</h5>
                                                                                     </div>
                                                                                </div>
                                                                           </td>
                                                                           <td>Copywriter</td>
                                                                           <td>charlotte@jourrapide.com</td>
                                                                           <td>Member</td>
                                                                           <td><a href="#!" class="btn btn-primary btn-sm w-100">Edit</a></td>
               
                                                                      </tr>
                                                                      <tr class="table-active">
                                                                           <td>
                                                                                <div class="d-flex align-items-center gap-1">
                                                                                     <img src="assets/images/users/avatar-6.jpg" alt="" class="avatar-sm rounded-circle">
                                                                                     <div class="d-block">
                                                                                          <h5 class="mb-0 d-flex align-items-center gap-1">Mary J. Germain<i class='bx bxs-badge-check text-success'></i></iconify-icon></h5>
                                                                                     </div>
                                                                                </div>
                                                                           </td>
                                                                           <td>Full Stack</td>
                                                                           <td>maryjgermain@jourrapide.com</td>
                                                                           <td>CEO</td>
                                                                           <td><a href="#!" class="btn btn-primary btn-sm w-100">Edit</a></td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>
                                                                                <div class="d-flex align-items-center gap-1">
                                                                                     <img src="assets/images/users/avatar-7.jpg" alt="" class="avatar-sm rounded-circle">
                                                                                     <div class="d-block">
                                                                                          <h5 class="mb-0">Kevin C. Reyes</h5>
                                                                                     </div>
                                                                                </div>
                                                                           </td>
                                                                           <td>Director of Product</td>
                                                                           <td>kevincreyes@jourrapide.com</td>
                                                                           <td>Member</td>
                                                                           <td><a href="#!" class="btn btn-primary btn-sm w-100">Edit</a></td>
                                                                      </tr>
                                                                 </tbody>
                                                            </table>
                                                       
                                                  
With checkboxes #

A list of all the users in your account including their name, title, email and role.

Name Title Email Role Action
Tony M. Carter Designer tonymcarter@jourrapide.com Member Edit
James E. Chamb UI/UX Designer jamesechambliss@teleworm.us Admin Edit
Charlotte J. Torres Copywriter charlotte@jourrapide.com Member Edit
Mary J. Germain Full Stack maryjgermain@jourrapide.com CEO Edit
Kevin C. Reyes Director of Product kevincreyes@jourrapide.com Member Edit
html
                                                       
                                                            <table class="table table-striped table-borderless table-centered">
                                                                 <thead class="table-light">
                                                                      <tr>
                                                                           <th scope="col">
                                                                                <div class="form-check">
                                                                                     <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault5">
                                                                                </div>
                                                                           </th>
                                                                           <th scope="col">Name</th>
                                                                           <th scope="col">Title</th>
                                                                           <th scope="col">Email</th>
                                                                           <th scope="col">Role</th>
                                                                           <th scope="col">Action</th>
                                                                      </tr>
                                                                 </thead>
                                                                 <tbody>
                                                                      <tr>
                                                                           <td>
                                                                                <div class="form-check">
                                                                                     <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                                                                                </div>
                                                                           </td>
                                                                           <td> Tony M. Carter </td>
                                                                           <td>Designer</td>
                                                                           <td>tonymcarter@jourrapide.com</td>
                                                                           <td>Member</td>
                                                                           <td><a href="#!" class="btn btn-primary btn-sm w-100">Edit</a></td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>
                                                                                <div class="form-check">
                                                                                     <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault2">
                                                                                </div>
                                                                           </td>
                                                                           <td>James E. Chamb</td>
                                                                           <td>UI/UX Designer</td>
                                                                           <td>jamesechambliss@teleworm.us</td>
                                                                           <td>Admin</td>
                                                                           <td><a href="#!" class="btn btn-primary btn-sm w-100">Edit</a></td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>
                                                                                <div class="form-check">
                                                                                     <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault3">
                                                                                </div>
                                                                           </td>
                                                                           <td> Charlotte J. Torres </td>
                                                                           <td>Copywriter</td>
                                                                           <td>charlotte@jourrapide.com</td>
                                                                           <td>Member</td>
                                                                           <td><a href="#!" class="btn btn-primary btn-sm w-100">Edit</a></td>

                                                                      </tr>
                                                                      <tr>
                                                                           <td>
                                                                                <div class="form-check">
                                                                                     <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault4">
                                                                                </div>
                                                                           </td>
                                                                           <td>
                                                                                Mary J. Germain <i class='bx bxs-badge-check text-success'></i></iconify-icon>
                                                                           </td>
                                                                           <td>Full Stack</td>
                                                                           <td>maryjgermain@jourrapide.com</td>
                                                                           <td>CEO</td>
                                                                           <td><a href="#!" class="btn btn-primary btn-sm w-100">Edit</a></td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>
                                                                                <div class="form-check">
                                                                                     <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault5">
                                                                                </div>
                                                                           </td>
                                                                           <td>Kevin C. Reyes</td>
                                                                           <td>Director of Product</td>
                                                                           <td>kevincreyes@jourrapide.com</td>
                                                                           <td>Member</td>
                                                                           <td><a href="#!" class="btn btn-primary btn-sm w-100">Edit</a></td>
                                                                      </tr>
                                                                 </tbody>
                                                            </table>
                                                       
                                                  
Nesting Table #

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

Invoice Number Invoice Amount Confirmation by the client Planned payment date
F-011221/21 $ 879.500 11/05/2023 12/05/2023
ERP number Carrier legal entity Responsible logistician Status
3-128-3 ToBrookfield Asset Management
Kevin C. Reyes
Verified
3-128-2 Brookfield Asset Management
Mary J. Germain
Pending
3-128-1 Westfield Asset Management
Charlotte J. Torres
Rejected
F-011221/19 $ 93.250 9/05/2023 10/05/2023
html
                                                       
                                                            <table class="table table-bordered table-striped table-centered">
                                                                 <thead>
                                                                      <tr>
                                                                           <th scope="col">Invoice Number</th>
                                                                           <th scope="col">Invoice Amount</th>
                                                                           <th scope="col">Confirmation by the client</th>
                                                                           <th scope="col">Planned payment date</th>
                                                                      </tr>
                                                                 </thead>
                                                                 <tbody>
                                                                      <tr>
                                                                           <td>F-011221/21</td>
                                                                           <td>$ 879.500</td>
                                                                           <td>11/05/2023</td>
                                                                           <td>12/05/2023</td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td colspan="4">
                                                                                <table class="table mb-0">
                                                                                     <thead>
                                                                                          <tr>
                                                                                               <th scope="col">ERP number</th>
                                                                                               <th scope="col">Carrier legal entity</th>
                                                                                               <th scope="col">Responsible logistician</th>
                                                                                               <th scope="col">Status</th>
                                                                                          </tr>
                                                                                     </thead>
                                                                                     <tbody>
                                                                                          <tr>
                                                                                               <td>3-128-3</td>
                                                                                               <td>ToBrookfield Asset Management</td>
                                                                                               <td>
                                                                                                    <div class="d-flex align-items-center gap-1">
                                                                                                         <img src="assets/images/users/avatar-7.jpg" alt="" class="avatar-sm rounded-circle">
                                                                                                         <div class="d-block">
                                                                                                              <h5 class="mb-0">Kevin C. Reyes</h5>
                                                                                                         </div>
                                                                                                    </div>
                                                                                               </td>
                                                                                               <td><span class="badge bg-success-subtle text-success py-1 px-2">Verified</span></td>
                                                                                          </tr>
                                                                                          <tr>
                                                                                               <td>3-128-2</td>
                                                                                               <td>Brookfield Asset Management</td>
                                                                                               <td>
                                                                                                    <div class="d-flex align-items-center gap-1">
                                                                                                         <img src="assets/images/users/avatar-6.jpg" alt="" class="avatar-sm rounded-circle">
                                                                                                         <div class="d-block">
                                                                                                              <h5 class="mb-0">Mary J. Germain</h5>
                                                                                                         </div>
                                                                                                    </div>
                                                                                               </td>
                                                                                               <td><span class="badge bg-warning-subtle text-warning py-1 px-2">Pending</span></td>
                                                                                          </tr>
                                                                                          <tr>
                                                                                               <td>3-128-1</td>
                                                                                               <td>Westfield Asset Management</td>
                                                                                               <td>
                                                                                                    <div class="d-flex align-items-center gap-1">
                                                                                                         <img src="assets/images/users/avatar-8.jpg" alt="" class="avatar-sm rounded-circle">
                                                                                                         <div class="d-block">
                                                                                                              <h5 class="mb-0">Charlotte J. Torres
                                                                                                              </h5>
                                                                                                         </div>
                                                                                                    </div>
                                                                                               </td>
                                                                                               <td><span class="badge bg-danger-subtle text-danger py-1 px-2">Rejected</span></td>
                                                                                          </tr>
                                                                                     </tbody>
                                                                                </table>
                                                                           </td>
                                                                      </tr>
                                                                      <tr>
                                                                           <td>F-011221/19</td>
                                                                           <td>$ 93.250</td>
                                                                           <td>9/05/2023</td>
                                                                           <td>10/05/2023</td>
                                                                      </tr>
                                                                 </tbody>
                                                            </table>
                                                       
                                                  
© Larkon. Crafted by Techzaa