Get Karik Now

Tables

Image or Text avatar

  1. Home
  2. Elements
  3. Avatar

Karik extends Bootstrap Table component with a variety of options to provide unique looking Table components that matches Karik's design standards.
For more info on the original Bootstrap utilities please visit the official Bootstrap Documentation.

Basic

Add the base class .tableto any table, then extend with custom styles or our various included modifier classes.

# First Last Status
1 Mark Otto Active
2 Jacob Thornton Approved
3 Larry the Bird Pending
4 Azumi Kend Blocked 
                                                    
<table class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td><span class="badge badge-pill badge-muted-brand">Active</span></td>
        </tr>
    </tbody>
</table>
Striped Rows

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

# First Last Status
1 Mark Otto Active
2 Jacob Thornton Approved
3 Larry the Bird Pending
4 Azumi Kend Blocked 
                                                    
<table class="table table-striped">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td><span class="badge badge-pill badge-muted-brand">Active</span></td>
        </tr>
    </tbody>
</table>
Hoverable rows

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

# First Last Status
1 Mark Otto Active
2 Jacob Thornton Approved
3 Larry the Bird Pending
4 Azumi Kend Blocked 
                                                    
<table class="table table-hover">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td><span class="badge badge-pill badge-muted-brand">Active</span></td>
        </tr>
    </tbody>
</table>
Borderless Table

Add .table-borderlessfor a table without borders.

# First Last Status
1 Mark Otto Active
2 Jacob Thornton Approved
3 Larry the Bird Pending
4 Azumi Kend Blocked 
                                                    
<table class="table table-borderless">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td><span class="badge badge-pill badge-muted-brand">Active</span></td>
        </tr>
    </tbody>
</table>
Bordered table

Add .table-borderedfor a table without borders.

# First Last Status
1 Mark Otto Active
2 Jacob Thornton Approved
3 Larry the Bird Pending
4 Azumi Kend Blocked 
                                                    
<table class="table table-bordered">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td><span class="badge badge-pill badge-muted-brand">Active</span></td>
        </tr>
    </tbody>
</table>
Dark table

Add .table-darkfor a table without borders.

# First Last Status
1 Mark Otto Active
2 Jacob Thornton Approved
3 Larry the Bird Pending
4 Azumi Kend Blocked 
                                                    
<table class="table table-dark">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td><span class="badge badge-pill badge-muted-brand">Active</span></td>
        </tr>
    </tbody>
</table>
Contextual classes & Head options

Use contextual classes to color table rows or individual cells. Similar to tables and dark tables, use the modifier classes .thead-light or .thead-dark to make <thead>s appear light or dark gray.

Class Heading Heading Heading Heading
Active Cell Cell Cell Cell
Default Cell Cell Cell Cell
Primary Cell Cell Cell Cell
Secondary Cell Cell Cell Cell
Success Cell Cell Cell Cell
Danger Cell Cell Cell Cell
Warning Cell Cell Cell Cell
Info Cell Cell Cell Cell
Light Cell Cell Cell Cell
Dark Cell Cell Cell Cell 
                                                    
<table class="table table-hover table-bordered">
    <thead class="thead-dark">
        <tr>
            <th scope="col">Class</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 class="table-active">
            <th scope="row">Active</th>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr>
            <th scope="row">Default</th>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>        
    </tbody>
</table>