Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 4 Table with Emphasis Classes</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script> <style> .bs-example{ margin: 20px; } </style> </head> <body> <div class="bs-example"> <table class="table"> <thead> <tr> <th>Row</th> <th>Bill</th> <th>Payment Date</th> <th>Payment Status</th> </tr> </thead> <tbody> <tr class="table-primary"> <td>1</td> <td>Credit Card</td> <td>04/07/2019</td> <td>Waiting for statement</td> </tr> <tr class="table-secondary"> <td>2</td> <td>Insurance</td> <td>02/07/2019</td> <td>Cancelled</td> </tr> <tr class="table-success"> <td>3</td> <td>Water</td> <td>01/07/2019</td> <td>Paid</td> </tr> <tr class="table-info"> <td>4</td> <td>Internet</td> <td>05/07/2019</td> <td>Change plan</td> </tr> <tr class="table-warning"> <td>5</td> <td>Electricity</td> <td>03/07/2019</td> <td>Pending</td> </tr> <tr class="table-danger"> <td>6</td> <td>Telephone</td> <td>06/07/2019</td> <td>Due</td> </tr> <tr class="table-active"> <td>7</td> <td>DTH</td> <td>04/07/2019</td> <td>Deactivated</td> </tr> <tr class="table-light"> <td>8</td> <td>Car Service</td> <td>08/07/2019</td> <td>Call in to confirm</td> </tr> <tr class="table-dark"> <td>9</td> <td>Gas</td> <td>06/07/2019</td> <td>Payment failed</td> </tr> </tbody> </table> </div> </body> </html>
