#### Table Coloured

##### Primary Table

##### Primary Table - View Code

    <div class="table-responsive">
    <table class="table">
        <thead class="bg-primary text-white">
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Nigam</td>
                <td>Eichmann</td>
                <td>@Sonu</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Deshmukh</td>
                <td>Prohaska</td>
                <td>@Genelia</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Roshan</td>
                <td>Rogahn</td>
                <td>@Hritik</td>
            </tr>
        </tbody>
    </table>
    </div>

To use add class `.table-primary` in the `<thead>`.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Nigam | Eichmann | @Sonu
2 | Deshmukh | Prohaska | @Genelia
3 | Roshan | Rogahn | @Hritik

##### Success Table

##### Success Table - View Code

    <div class="table-responsive">
    <table class="table">
        <thead class="bg-success text-white">
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Nigam</td>
                <td>Eichmann</td>
                <td>@Sonu</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Deshmukh</td>
                <td>Prohaska</td>
                <td>@Genelia</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Roshan</td>
                <td>Rogahn</td>
                <td>@Hritik</td>
            </tr>
        </tbody>
    </table>
    </div>

To use add class `.table-success` in the `<thead>`.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Nigam | Eichmann | @Sonu
2 | Deshmukh | Prohaska | @Genelia
3 | Roshan | Rogahn | @Hritik

##### Info Table

##### Info Table - View Code

    <div class="table-responsive">
    <table class="table">
        <thead class="bg-info text-white">
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Nigam</td>
                <td>Eichmann</td>
                <td>@Sonu</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Deshmukh</td>
                <td>Prohaska</td>
                <td>@Genelia</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Roshan</td>
                <td>Rogahn</td>
                <td>@Hritik</td>
            </tr>
        </tbody>
    </table>
    </div>

To use add class `.table-info` in the `<thead>` .

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Nigam | Eichmann | @Sonu
2 | Deshmukh | Prohaska | @Genelia
3 | Roshan | Rogahn | @Hritik

##### Warning Table

##### Warning Table - View Code

    <div class="table-responsive">
    <table class="table">
        <thead class="bg-warning text-white">
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Nigam</td>
                <td>Eichmann</td>
                <td>@Sonu</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Deshmukh</td>
                <td>Prohaska</td>
                <td>@Genelia</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Roshan</td>
                <td>Rogahn</td>
                <td>@Hritik</td>
            </tr>
        </tbody>
    </table>
    </div>

To use add class `.table-warning` in the `<thead>`.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Nigam | Eichmann | @Sonu
2 | Deshmukh | Prohaska | @Genelia
3 | Roshan | Rogahn | @Hritik

##### Danger Table

##### Danger Table - View Code

    <div class="table-responsive">
      <table class="table">
          <thead class="bg-danger text-white">
              <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>1</td>
                  <td>Nigam</td>
                  <td>Eichmann</td>
                  <td>@Sonu</td>
              </tr>
              <tr>
                  <td>2</td>
                  <td>Deshmukh</td>
                  <td>Prohaska</td>
                  <td>@Genelia</td>
              </tr>
              <tr>
                  <td>3</td>
                  <td>Roshan</td>
                  <td>Rogahn</td>
                  <td>@Hritik</td>
              </tr>
          </tbody>
      </table>
    </div>

To use add class `.table-danger` in the `<thead>`.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Nigam | Eichmann | @Sonu
2 | Deshmukh | Prohaska | @Genelia
3 | Roshan | Rogahn | @Hritik

##### Inverse Table

##### Inverse Table - View Code

    <div class="table-responsive">
      <table class="table">
          <thead class="bg-inverse text-white">
              <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>1</td>
                  <td>Nigam</td>
                  <td>Eichmann</td>
                  <td>@Sonu</td>
              </tr>
              <tr>
                  <td>2</td>
                  <td>Deshmukh</td>
                  <td>Prohaska</td>
                  <td>@Genelia</td>
              </tr>
              <tr>
                  <td>3</td>
                  <td>Roshan</td>
                  <td>Rogahn</td>
                  <td>@Hritik</td>
              </tr>
          </tbody>
      </table>
    </div>

To use add class `.table-dark` in the `<thead>`.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Nigam | Eichmann | @Sonu
2 | Deshmukh | Prohaska | @Genelia
3 | Roshan | Rogahn | @Hritik

##### Primary border Table

##### Primary border Table - View Code

    <div class="table-responsive">
      <table class="table table-bordered border-primary">
          <thead class="bg-primary text-white">
              <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>1</td>
                  <td>Nigam</td>
                  <td>Eichmann</td>
                  <td>@Sonu</td>
              </tr>
              <tr>
                  <td>2</td>
                  <td>Deshmukh</td>
                  <td>Prohaska</td>
                  <td>@Genelia</td>
              </tr>
              <tr>
                  <td>3</td>
                  <td>Roshan</td>
                  <td>Rogahn</td>
                  <td>@Hritik</td>
              </tr>
          </tbody>
      </table>
    </div>

To use add class `.bg-primary .text-white` in the `<thead>` and add class `.border .border-primary` in `<tbody>`

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Nigam | Eichmann | @Sonu
2 | Deshmukh | Prohaska | @Genelia
3 | Roshan | Rogahn | @Hritik

##### Success border Table

##### Success border Table - View Code

    <div class="table-responsive">
    <table class="table table-bordered border-success">
        <thead class="bg-success text-white">
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Nigam</td>
                <td>Eichmann</td>
                <td>@Sonu</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Deshmukh</td>
                <td>Prohaska</td>
                <td>@Genelia</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Roshan</td>
                <td>Rogahn</td>
                <td>@Hritik</td>
            </tr>
        </tbody>
    </table>
    </div>

To use add class `.bg-success .text-white` in the `<thead>` and add class `.border .border-success` in `<tbody>`

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Nigam | Eichmann | @Sonu
2 | Deshmukh | Prohaska | @Genelia
3 | Roshan | Rogahn | @Hritik

##### Info border Table

##### Info border Table - View Code

    <div class="table-responsive">
    <table class="table border-info table-bordered">
        <thead class="bg-info text-white">
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Nigam</td>
                <td>Eichmann</td>
                <td>@Sonu</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Deshmukh</td>
                <td>Prohaska</td>
                <td>@Genelia</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Roshan</td>
                <td>Rogahn</td>
                <td>@Hritik</td>
            </tr>
        </tbody>
    </table>
    </div>

To use add class `.bg-info .text-white` in the `<thead>` and add class `.border .border-info` in `<tbody>`

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Nigam | Eichmann | @Sonu
2 | Deshmukh | Prohaska | @Genelia
3 | Roshan | Rogahn | @Hritik

##### Warning border Table

##### Warning border Table - View Code

    <div class="table-responsive">
    <table class="table table-bordered border-warning">
        <thead class="bg-warning text-white">
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Nigam</td>
                <td>Eichmann</td>
                <td>@Sonu</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Deshmukh</td>
                <td>Prohaska</td>
                <td>@Genelia</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Roshan</td>
                <td>Rogahn</td>
                <td>@Hritik</td>
            </tr>
        </tbody>
    </table>
    </div>

To use add class `.bg-warning .text-white` in the `<thead>` and add class `.border .border-warning` in `<tbody>`

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Nigam | Eichmann | @Sonu
2 | Deshmukh | Prohaska | @Genelia
3 | Roshan | Rogahn | @Hritik

##### Danger border Table

##### Danger border Table - View Code

    <div class="table-responsive">
    <table class="table table-bordered border-danger">
        <thead class="bg-danger text-white">
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Nigam</td>
                <td>Eichmann</td>
                <td>@Sonu</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Deshmukh</td>
                <td>Prohaska</td>
                <td>@Genelia</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Roshan</td>
                <td>Rogahn</td>
                <td>@Hritik</td>
            </tr>
        </tbody>
    </table>
    </div>

To use add class `.bg-danger .text-white` in the `<thead>` and add class `.border .border-danger` in `<tbody>`

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Nigam | Eichmann | @Sonu
2 | Deshmukh | Prohaska | @Genelia
3 | Roshan | Rogahn | @Hritik

##### Dark border Table

##### Dark border Table - View Code

    <div class="table-responsive">
    <table class="table table-bordered border-dark">
        <thead class="bg-inverse text-white">
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Nigam</td>
                <td>Eichmann</td>
                <td>@Sonu</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Deshmukh</td>
                <td>Prohaska</td>
                <td>@Genelia</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Roshan</td>
                <td>Rogahn</td>
                <td>@Hritik</td>
            </tr>
        </tbody>
    </table>
    </div>

To use add class `.bg-dark .text-white` in the `<thead>` and add class `.border .border-dark` in `<tbody>`

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Nigam | Eichmann | @Sonu
2 | Deshmukh | Prohaska | @Genelia
3 | Roshan | Rogahn | @Hritik

##### Light Primary Table

##### Light Primary Table - View Code

    <div class="table-responsive">
    <table class="table table-hover table-primary">
        <thead class="bg-primary text-white">
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td colspan="2">Larry the Bird</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
    </div>

To use add class in the table `.table-hover .table-primary` and add class `.bg-primary .text-white` in the `<thead>`.

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

##### Light Success Table

##### Light Success Table - View Code

    <div class="table-responsive">
    <table class="table table-hover table-success">
      <thead class="bg-success text-white">
          <tr>
              <th scope="col">#</th>
              <th scope="col">First</th>
              <th scope="col">Last</th>
              <th scope="col">Handle</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <th scope="row">1</th>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
          </tr>
          <tr>
              <th scope="row">2</th>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
          </tr>
          <tr>
              <th scope="row">3</th>
              <td colspan="2">Larry the Bird</td>
              <td>@twitter</td>
          </tr>
      </tbody>
    </table>
    </div>

To use add class in the table `.table-hover .table-success` and add class `.bg-success .text-white` in the `<thead>`.

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

##### Light Info Table

##### Light Info Table - View Code

    <div class="table-responsive">
    <table class="table table-hover table-info">
        <thead class="bg-info text-white">
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td colspan="2">Larry the Bird</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
    </div>

To use add class in the table `.table-hover .table-info` and add class `.bg-info .text-white` in the `<thead>`.

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

##### Light Warning Table

##### Light Warning Table - View Code

    <div class="table-responsive">
    <table class="table table-hover table-warning">
        <thead class="bg-warning text-white">
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td colspan="2">Larry the Bird</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
    </div>

To use add class in the table `.table-hover .table-warning` and add class `.bg-warning .text-white` in the `<thead>`.

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

##### Light Danger Table

##### Light Danger Table - View Code

    <div class="table-responsive">
    <table class="table table-hover table-danger">
        <thead class="bg-danger text-white">
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td colspan="2">Larry the Bird</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
    </div>

To use add class in the table `.table-hover .table-danger` and add class `.bg-danger .text-white` in the `<thead>`.

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

##### Dark Table

##### Dark Table - View Code

    <div class="table-responsive">
    <table class="table table-hover table-dark">
        <thead class="bg-dark text-white">
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td colspan="2">Larry the Bird</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
    </div>

To use add class in the table `.table-hover .table-dark` and add class `.bg-dark .text-white` in the `<thead>`.

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

#### Settings

###### Theme

Light Dark

###### Theme Direction

LTR RTL

###### Theme Colors

###### Layout Type

Vertical
Horizontal

###### Container Option

Boxed Full

###### Sidebar Type

Full
Collapse

###### Card With

Border Shadow