Modernize Bootstrap Admin

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