All for Joomla All for Webmasters

Bootstrap Tables

We can create different types of Bootstrap tables by using different classes to style them.


Bootstrap Basic Table:

The basic Bootstrap table has a light padding and only horizontal dividers. The .table class is used to add basic styling to a table.

Example:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3.   <head>
  4.      <title>Job</title>
  5.      <link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”/>
  6.   </head>
  7.   <body>
  8. <div class=“container”>
  9.   <h1>Basic Table Example</h1>
  10. <table class=“table”>
  11.   <tr><th>Id</th><th>Name</th><th>Age</th></tr>
  12.   <tr><td>101</td><td>Rahul</td><td>23</td></tr>
  13.   <tr><td>102</td><td>Umesh</td><td>22</td></tr>
  14.   <tr><td>103</td><td>Max</td><td>29</td></tr>
  15.   <tr><td>104</td><td>Ajeet</td><td>21</td></tr>
  16. </table>
  17. </div>
  18. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
  19.   <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”></script>
  20.   </body>
  21. </html>

 


Bootstrap Striped Rows Table:

The .table-striped class is used to add zebra-stripes to a table:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3.   <head>
  4.      <title>Job</title>
  5.      <link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”/>
  6.   </head>
  7.   <body>
  8. <div class=“container”>
  9.   <h1>Striped Table Example</h1>
  10. <table class=“table table-striped”>
  11.   <tr><th>Id</th><th>Name</th><th>Age</th></tr>
  12.   <tr><td>101</td><td>Rahul</td><td>23</td></tr>
  13.   <tr><td>102</td><td>Umesh</td><td>22</td></tr>
  14.   <tr><td>103</td><td>Max</td><td>29</td></tr>
  15.   <tr><td>104</td><td>Ajeet</td><td>21</td></tr>
  16. </table>
  17. </div>
  18. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
  19.   <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”></script>
  20.   </body>
  21. </html>

 


Bootstrap Bordered table:

The .table-bordered class is used to add borders on all sides of the table and cells:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3.   <head>
  4.      <title>Job</title>
  5.      <link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”/>
  6.   </head>
  7.   <body>
  8. <div class=“container”>
  9.   <h1>Bordered Table Example</h1>
  10. <table class=“table table-striped table-bordered”>
  11.   <tr><th>Id</th><th>Name</th><th>Age</th></tr>
  12.   <tr><td>101</td><td>Rahul</td><td>23</td></tr>
  13.   <tr><td>102</td><td>Umesh</td><td>22</td></tr>
  14.   <tr><td>103</td><td>Max</td><td>29</td></tr>
  15.   <tr><td>104</td><td>Ajeet</td><td>21</td></tr>
  16. </table>
  17. </div>
  18.   <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
  19.   <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”></script>
  20.   </body>
  21. </html>

 


Bootstrap Hover rows Table:

The .table-hover class is used to enable a hover state on table rows:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3.   <head>
  4.      <title>Job</title>
  5.      <link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”/>
  6.   </head>
  7.   <body>
  8. <div class=“container”>
  9.   <h1>Hower rows Table Example</h1>
  10. <table class=“table table-hover”>
  11.   <tr><th>Id</th><th>Name</th><th>Age</th></tr>
  12.   <tr><td>101</td><td>Rahul</td><td>23</td></tr>
  13.   <tr><td>102</td><td>Umesh</td><td>22</td></tr>
  14.   <tr><td>103</td><td>Max</td><td>29</td></tr>
  15.   <tr><td>104</td><td>Ajeet</td><td>21</td></tr>
  16. </table>
  17. </div>
  18.   <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
  19.   <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”></script>
  20.   </body>
  21. </html>

 


Bootstrap Condensed table:

The .table-condensed class is used to make a table more compact by cutting cell padding in half:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3.   <head>
  4.      <title>Job</title>
  5.      <link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”/>
  6.   </head>
  7.   <body>
  8. <div class=“container”>
  9.   <h1>Condensed Table Example</h1>
  10. <table class=“table table-condensed”>
  11.   <tr><th>Id</th><th>Name</th><th>Age</th></tr>
  12.   <tr><td>101</td><td>Rahul</td><td>23</td></tr>
  13.   <tr><td>102</td><td>Umesh</td><td>22</td></tr>
  14.   <tr><td>103</td><td>Max</td><td>29</td></tr>
  15.   <tr><td>104</td><td>Ajeet</td><td>21</td></tr>
  16. </table>
  17. </div>
  18.   <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
  19.   <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”></script>
  20.   </body>
  21. </html>

 


Bootstrap Contextual classes:.

Contextual classes are used to color table rows (<tr>) or table cells (<td>):

Following are the different contextual classes:

Class Description
.active It is used to apply the hover color to the table row or table cell
.success It indicates a successful or positive action
.info It indicates a neutral informative change or action
.warning It specifies a warning that might need attention
.danger It indicates a dangerous or potentially negative action

Example:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3.   <head>
  4.      <title>Job</title>
  5.      <link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”/>
  6.   </head>
  7.   <body>
  8. <div class=“container”>
  9.   <h1>Contextual classes</h1>
  10. <table class=“table”>
  11.   <tr class=“success”><th>Id</th><th>Name</th><th>Age</th></tr>
  12.   <tr class=“active”><td>101</td><td>Rahul</td><td>23</td></tr>
  13.   <tr class=“danger”><td>102</td><td>Umesh</td><td>22</td></tr>
  14.   <tr class=“info”><td>103</td><td>Max</td><td>29</td></tr>
  15.   <tr class=“warning”><td>104</td><td>Ajeet</td><td>21</td></tr>
  16. </table>
  17. </div>
  18. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
  19.   <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”></script>
  20.   </body>
  21. </html>

 


Responsive tables:

The .table-responsive class is used to create a responsive table. You can open the responsible table even on small devices (under 768px). Then the table will be scrolled horizontally. Displays larger than 768px wide, there is no difference.

See this example:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3.   <head>
  4.      <title>Job</title>
  5.      <link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”/>
  6.   </head>
  7.   <body>
  8. <div class=“container”>
  9.   <h1>Contextual classes</h1>
  10. <div class=“table-responsive”>
  11. <table class=“table”>
  12.   <tr class=“success”><th>Id</th><th>Name</th><th>Age</th></tr>
  13.   <tr class=“active”><td>101</td><td>Rahul</td><td>23</td></tr>
  14.   <tr class=“danger”><td>102</td><td>Umesh</td><td>22</td></tr>
  15.   <tr class=“info”><td>103</td><td>Max</td><td>29</td></tr>
  16.   <tr class=“warning”><td>104</td><td>Ajeet</td><td>21</td></tr>
  17. </table>
  18. </div>
  19. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
  20.   <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”></script>
  21.   </body>
  22. </html>
PinIt
submit to reddit

Leave a Reply

Top