App4io

Primary Table


<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


<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


<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


<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


<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


<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


<div class="table-responsive rounded-4">
  <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


<div class="table-responsive rounded-4">
<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


<div class="table-responsive rounded-4">
<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


<div class="table-responsive rounded-4">
<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


<div class="table-responsive rounded-4">
<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


<div class="table-responsive rounded-4">
<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


<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


<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


<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


<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


<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


<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

Chat Application

Invoice App

Contact Application

Email App

User Profile

Calendar App

Turnos

Contact List Table

Notes Application

Roman Joined the Team!

New message

Bianca sent payment

Jolly completed tasks

John received payment

Roman Joined the Team!

Utilizador

O meu perfil

Administração

Chat Application

Invoice App

Contact Application

Email App

User Profile

Calendar App

Turnos

Contact List Table

Notes Application

Roman Joined the Team!

New message

Bianca sent payment

Jolly completed tasks

John received payment

Roman Joined the Team!

Utilizador

O meu perfil

Administração

Primary Table

Success Table

Info Table

Warning Table

Danger Table

Inverse Table

Primary border Table

Success border Table

Info border Table

Warning border Table

Danger border Table

Dark border Table

Light Primary Table

Light Success Table

Light Info Table

Light Warning Table

Light Danger Table

Dark Table

Definições

Tema

Intensidade do tema

Direção do tema

Cores do tema

Opção do contentor

Tipo de sidebar

Estilo do cartão

Shopping Cart

Supreme toys cooker

$250

Supreme toys cooker

$250

Supreme toys cooker

$250