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