Create table with multiple colors rows using Bootstrap in HTML,PHP

How to change table every row color including columns colors with success,info,warning,active,danger classes.

In this tutorial we are using Five different type of bootstrap table classes which is used to give a particular type of color to table row. So web developer can define this class as TR ( Table Row ) class which automatically changes the whole row color. So here is the complete step by step tutorial for Create table with multiple colors rows using Bootstrap in HTML,PHP.

https://www.android-examples.com/demo/heading-tag.html

How to Create table with multiple colors rows using Bootstrap in HTML,PHP.

List of classes :

  1. .success
  2. .info
  3. .warning
  4. .active
  5. .danger

Code for multiple-colors-rows.html file.

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Multiple colors Rows</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h1>Table With Multiple Colors Rows</h1>


<table class="table table-hover">
 <thead>
 <tr>
 <th>Name</th>
 <th>Website</th>
 <th>Email</th>
 </tr>
 </thead>
 <tbody>
 <tr class="success">
 <td>Raju</td>
 <td>Raju-demo-website.com</td>
 <td>[email protected]</td>
 </tr>
 <tr class="info">
 <td>Raja</td>
 <td>Raja-demo.com</td>
 <td>[email protected]</td>
 </tr>
 <tr class="warning">
 <td>Rani</td>
 <td>Rani-demo.com</td>
 <td>[email protected]</td>
 </tr>
 <tr class="active">
 <td>Raju</td>
 <td>Raju-demo-website.com</td>
 <td>[email protected]</td>
 </tr>
 <tr class="danger">
 <td>Raja</td>
 <td>Raja-demo.com</td>
 <td>[email protected]</td>
 </tr>
 </tbody>
 </table>

 
</div>

</body>
</html>

Screenshot:

Create table with multiple colors rows using Bootstrap in HTML,PHP

Leave a Reply

Your email address will not be published. Required fields are marked *