Bootstrap Tables, Full details of Bootstrap Tables

Bootstrap Tutorial

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

Bootstrap Tutorial