Prev Page
Next Page  
Bootstrap Tables
Using Bootstrap you can create table in a simple way and different types of Bootstrap tables by using different classes.
Basic Table :
A basic Bootstrap table has a light padding and only horizontal dividers. add the base class .table to any <table>.
<!DOCTYPE html>
<html>
<head>
   <title>Basic Table</title>
   <link href="css/bootstrap.min.css" rel="stylesheet">
   <script src="js/jquery.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
</head>
<body>
 
<table class="table">
 
    <thead>
    <tr>
            <th>S.No</th>
            <th>Name</th>
            <th>Website</th>
        </tr>
    </thead>
    
    <tbody>
    <tr>
        <td>1</td>
            <td>Free Time Learn</td>
            <td>www.freetimelearn.com</td>
        </tr>
        <tr>
        <td>2</td>
            <td>Free Time Learning</td>
            <td>www.freetimelearning.com</td>
        </tr>
        <tr>
        <td>3</td>
            <td>FreeTimeLearn</td>
            <td>www.freetimelearning.xyz</td>
        </tr>
    </tbody>
    
</table>
 
</body>
</html>
Output :
S.No Name Website
1 Free Time Learn www.freetimelearn.com
2 Free Time Learning www.freetimelearning.com
3 FreeTimeLearn www.freetimelearning.xyz
Bordered Table :
You can also add .table-bordered class for borders on all sides of the table and cells..
<!DOCTYPE html>
<html>
<head>
   <title>Bordered Table</title>
   <link href="css/bootstrap.min.css" rel="stylesheet">
   <script src="js/jquery.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
</head>
<body>
 
<table class="table table-bordered">
 
    <thead>
    <tr>
            <th>S.No</th>
            <th>Name</th>
            <th>Website</th>
        </tr>
    </thead>
    
    <tbody>
    <tr>
        <td>1</td>
            <td>Free Time Learn</td>
            <td>www.freetimelearn.com</td>
        </tr>
        <tr>
        <td>2</td>
            <td>Free Time Learning</td>
            <td>www.freetimelearning.com</td>
        </tr>
        <tr>
        <td>3</td>
            <td>FreeTimeLearn</td>
            <td>www.freetimelearning.xyz</td>
        </tr>
    </tbody>
    
</table>
 
</body>
</html>
Output :
S.No Name Website
1 Free Time Learn www.freetimelearn.com
2 Free Time Learning www.freetimelearning.com
3 FreeTimeLearn www.freetimelearning.xyz
Striped Table :
You can create table with alternate background like zebra-stripes by simply adding the Bootstrap's class .table-striped to the .table base class.
This is achieved by adding the background-color to the table row within <tbody> element via the :nth-child CSS selector (not supported in IE7-8).
<!DOCTYPE html>
<html>
<head>
   <title>Striped Table</title>
   <link href="css/bootstrap.min.css" rel="stylesheet">
   <script src="js/jquery.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
</head>
<body>
 
<table class="table table-striped">
 
    <thead>
    <tr>
            <th>S.No</th>
            <th>Name</th>
            <th>Website</th>
        </tr>
    </thead>
    
    <tbody>
    <tr>
        <td>1</td>
            <td>Free Time Learn</td>
            <td>www.freetimelearn.com</td>
        </tr>
        <tr>
        <td>2</td>
            <td>Free Time Learning</td>
            <td>www.freetimelearning.com</td>
        </tr>
        <tr>
        <td>3</td>
            <td>FreeTimeLearn</td>
            <td>www.freetimelearning.xyz</td>
        </tr>
    </tbody>
    
</table>
 
</body>
</html>
Output :
S.No Name Website
1 Free Time Learn www.freetimelearn.com
2 Free Time Learning www.freetimelearning.com
3 FreeTimeLearn www.freetimelearning.xyz
Hover Rows :
Bootstrap .table-hover class adds a hover effect (grey background color) on table rows:
<!DOCTYPE html>
<html>
<head>
   <title>Hover Rows</title>
   <link href="css/bootstrap.min.css" rel="stylesheet">
   <script src="js/jquery.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
</head>
<body>
 
<table class="table table-hover">
 
    <thead>
    <tr>
            <th>S.No</th>
            <th>Name</th>
            <th>Website</th>
        </tr>
    </thead>
    
    <tbody>
    <tr>
        <td>1</td>
            <td>Free Time Learn</td>
            <td>www.freetimelearn.com</td>
        </tr>
        <tr>
        <td>2</td>
            <td>Free Time Learning</td>
            <td>www.freetimelearning.com</td>
        </tr>
        <tr>
        <td>3</td>
            <td>FreeTimeLearn</td>
            <td>www.freetimelearning.xyz</td>
        </tr>
    </tbody>
    
</table>
 
</body>
</html>
Output :
S.No Name Website
1 Free Time Learn www.freetimelearn.com
2 Free Time Learning www.freetimelearning.com
3 FreeTimeLearn www.freetimelearning.xyz
Condensed table :
Add .table-condensed to make tables more compact by cutting cell padding in half.
	
<!DOCTYPE html>
<html>
<head>
   <title>Condensed Table</title>
   <link href="css/bootstrap.min.css" rel="stylesheet">
   <script src="js/jquery.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
</head>
<body>
 
<table class="table table-condensed">
 
    <thead>
    <tr>
            <th>S.No</th>
            <th>Name</th>
            <th>Website</th>
        </tr>
    </thead>
    
    <tbody>
    <tr>
        <td>1</td>
            <td>Free Time Learn</td>
            <td>www.freetimelearn.com</td>
        </tr>
        <tr>
        <td>2</td>
            <td>Free Time Learning</td>
            <td>www.freetimelearning.com</td>
        </tr>
        <tr>
        <td>3</td>
            <td>FreeTimeLearn</td>
            <td>www.freetimelearning.xyz</td>
        </tr>
    </tbody>
    
</table>
 
</body>
</html>
Output :
S.No Name Website
1 Free Time Learn www.freetimelearn.com
2 Free Time Learning www.freetimelearning.com
3 FreeTimeLearn www.freetimelearning.xyz
Contextual Classes :
The Contextual classes shown in following table will allow you to change the background color of your table rows or individual cells.
Class Description
.active Applies the hover color to a particular row or cell
.success Indicates a successful or positive action
.info Indicates a neutral informative change or action
.warning Indicates a warning that might need attention
.danger Indicates a dangerous or potentially negative action 
<!DOCTYPE html>
<html>
<head>
   <title>Contextual classes</title>
   <link href="css/bootstrap.min.css" rel="stylesheet">
   <script src="js/jquery.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
</head>
<body>
 
<table class="table">
 
    <thead>
    <tr>
            <th>Class</th>
            <th>Name</th>
            <th>Website</th>
        </tr>
    </thead>
    
    <tbody>
        <tr>
        <td>Default</td>
            <td>Free Time Learn</td>
            <td>www.freetimelearn.com</td>
        </tr>
        <tr class="active">
        <td>Active</td>
            <td>Free Time Learning</td>
            <td>www.freetimelearning.com</td>
        </tr>
        <tr class="success">
        <td>Success</td>
            <td>Free Time Learn</td>
            <td>www.freetimelearn.com</td>
        </tr>
        <tr class="info">
        <td>Info</td>
            <td>Free Time Learning</td>
            <td>www.freetimelearning.com</td>
        </tr>
        <tr class="warning">
        <td>Warning</td>
            <td>Free Time Learn</td>
            <td>www.freetimelearn.com</td>
        </tr>
        <tr class="danger">
        <td>Danger</td>
            <td>Free Time Learning</td>
            <td>www.freetimelearning.com</td>
        </tr>
 
    </tbody>
    
</table>
 
</body>
</html>
Output :
Class Name Website
Default Free Time Learn www.freetimelearn.com
Active Free Time Learning www.freetimelearning.com
Success Free Time Learn www.freetimelearn.com
Info Free Time Learning www.freetimelearning.com
Warning Free Time Learn www.freetimelearn.com
Danger Free Time Learning www.freetimelearning.com
Responsive Table :
The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.:
<!DOCTYPE html>
<html>
<head>
   <title>Responsive Table</title>
   <link href="css/bootstrap.min.css" rel="stylesheet">
   <script src="js/jquery.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
</head>
<body>
 
<table class="table table-responsive">
    <thead>
        <tr>
            <th>S.No</th>
            <th>Name</th>
            <th>Website</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Free Time Learn</td>
            <td>www.freetimelearn.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Free Time Learning</td>
            <td>www.freetimelearning.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>FreeTimeLearn</td>
            <td>www.freetimelearning.xyz</td>
        </tr>
    </tbody>
</table>
 
</body>
</html>
Output :
S.No Name Website
1 Free Time Learn www.freetimelearn.com
2 Free Time Learning www.freetimelearning.com
3 FreeTimeLearn www.freetimelearning.xyz
  Prev Page
Next Page