Using the Bootstrap Table is a simple way to design an elegant table. It is easy to make, it has style, it is mobile responsive and it is used for a wide palette of practical applications.
Bootstrap Table. What is good for?
Bootstrap Tables are a beautiful way to create calendars, date pickers, shopping carts, billing reports, admin dahsboards and so much more. In its essence, a bootstrap table it’s a great way to show data.
Update Bootstrap 4 Beta
In Bootstrap 4 Beta this is the detailed list of changes.
Tables
- Nearly all instances of the > selector have been removed, meaning nested tables will now automatically inherit styles from their parents. This greatly simplifies our selectors and potential customizations.
- Responsive tables no longer require a wrapping element. Instead, just put the .table-responsive right on the <table>.
- Renamed .table-condensed to .table-sm for consistency.
- Added a new .table-inverse option.
- Added table header modifiers: .thead-default and .thead-inverse.
- Renamed contextual classes to have a .table–prefix. Hence .active, .success, .warning, .danger and .table-info to .table-active, .table-success, .table-warning, .table-danger and .table-info.
Bootstrap Table. What are we going to learn?
- Basic Table
- Striped Rows
- Bordered Table
- Hoverable Rows
- Small Table
- Contextual Classes
- Responsive Tables
- Bonus! Bootstrap Shopping Table
Bootstrap Table – The Basic Table
Below you will find the most basic Bootstrap Table and yet it’s so much better looking than Excel.
Here’s how it looks:
And the code:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Basic Table</h2> <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p> <table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table> </div> </body> </html>
You can create a basic table by using the specific bootstrap table class .table to the <table> element.
Bootstrap Table with Striped Rows
Be bold or be italic. Don’t be regular. You can give an alternate background to the table like zebra-stripes.
Simply add the Bootstrap class .table-striped to the .table class. Simply add a background-color within <tbody> element via the CSS selector :nth-child.
How it looks:
How it’s coded:
<table class="table table-striped"> <thead> <tr> <th>Row</th> <th>First Name</th> <th>Last Name</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John</td> <td>Carter</td> <td>[email protected]</td> </tr> <tr> <td>2</td> <td>Peter</td> <td>Parker</td> <td>[email protected]</td> </tr> <tr> <td>3</td> <td>John</td> <td>Rambo</td> <td>[email protected]</td> </tr> </tbody> </table>
Bootstrap Table with Border
Do you want to add a border to your table? Add it to all your cells by adding this extra line .table-bordered to the .table class.
How it looks:
How it’s coded:
<table class="table table-bordered"> <thead> <tr> <th>Row</th> <th>First Name</th> <th>Last Name</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John</td> <td>Carter</td> <td>[email protected]</td> </tr> <tr> <td>2</td> <td>Peter</td> <td>Parker</td> <td>[email protected]</td> </tr> <tr> <td>3</td> <td>John</td> <td>Rambo</td> <td>[email protected]</td> </tr> </tbody> </table>
Hoverable Rows
Give a hover state to your Bootstrap Table within your <tbody> element. You have to add the Bootstrap classs .table-hover to the .table base class.
It looks like this:
How it’s coded:
<table class="table table-hover"> <thead> <tr> <th>Row</th> <th>First Name</th> <th>Last Name</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John</td> <td>Carter</td> <td>[email protected]</td> </tr> <tr> <td>2</td> <td>Peter</td> <td>Parker</td> <td>[email protected]</td> </tr> <tr> <td>3</td> <td>John</td> <td>Rambo</td> <td>[email protected]</td> </tr> </tbody> </table>
Bootstrap Small Table
Would you like a smaller table? Cut the cell padding in half by simply adding an extra class .table-condensed
to the .table class.
It looks like this
And the code is:
<table class="table table-condensed"> <thead> <tr> <th>Row</th> <th>First Name</th> <th>Last Name</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John</td> <td>Carter</td> <td>[email protected]</td> </tr> <tr> <td>2</td> <td>Peter</td> <td>Parker</td> <td>[email protected]</td> </tr> <tr> <td>3</td> <td>John</td> <td>Rambo</td> <td>[email protected]</td> </tr> </tbody> </table>
Bootstrap Table – Contextual Classes
Give your cells new features to emphasize the row or cells with special events like confirm, pending, due etc.
You can do this by coloring the background.
It looks like this:
And the code is:
<table class="table"> <thead> <tr> <th>Row</th> <th>Bill</th> <th>Payment Date</th> <th>Payment Status</th> </tr> </thead> <tbody> <tr class="active"> <td>1</td> <td>Credit Card</td> <td>04/07/2014</td> <td>Call in to confirm</td> </tr> <tr class="success"> <td>2</td> <td>Water</td> <td>01/07/2014</td> <td>Paid</td> </tr> <tr class="info"> <td>3</td> <td>Internet</td> <td>05/07/2014</td> <td>Change plan</td> </tr> <tr class="warning"> <td>4</td> <td>Electricity</td> <td>03/07/2014</td> <td>Pending</td> </tr> <tr class="danger"> <td>5</td> <td>Telephone</td> <td>06/07/2014</td> <td>Due</td> </tr> </tbody> </table>
Responsive Bootstrap Table
To make any table responsive, simply place in the <div> element the .table-responsive.
The code for this is:
<div class="table-responsive"> <table class="table table-bordered"> <thead> <tr> <th>Row</th> <th>First Name</th> <th>Last Name</th> <th>Email</th> <th>Biography</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John</td> <td>Carter</td> <td>[email protected]</td> <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</td> </tr> <tr> <td>2</td> <td>Peter</td> <td>Parker</td> <td>[email protected]</td> <td>Vestibulum consectetur scelerisque lacus, ac fermentum lorem convallis sed. Nam odio tortor, dictum quis malesuada at, pellentesque.</td> </tr> <tr> <td>3</td> <td>John</td> <td>Rambo</td> <td>[email protected]</td> <td>Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim.</td> </tr> </tbody> </table> </div>
Bonus! Bootstrap Shopping Table
Check this slick design of a bootstrap shopping table from Creative Tim and learn how to make it.
It looks like this:
The HTML code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<table id="cart" class="table table-responsive">
<thead>
<tr class="names">
<th style="width:50%">Product</th>
<th style="width:10%" class="text-right hidden-xs">Size</th>
<th style="width:10%" class="text-right hidden-xs">Price</th>
<th style="width:15%" class="text-right">Quantity</th>
<th style="width:10%" class="text-right">Amount</th>
<th style="width:5%"></th>
</tr>
</thead>
<tbody>
<tr class="item">
<td data-th="Product">
<div class="row">
<div class="col-sm-3 hidden-xs"><img src="https://kickz.akamaized.net/en/media/images/p/600/converse-all_star_ox_canvas-bordeaux-3.jpg" alt="Converse" class="img-product img-responsive img-rounded"/></div>
<div class="col-sm-9">
<h4 class="nomargin">Converse All Star OX Canvas</h4>
<p class="hidden-xs">It was in 1908, when Marquise Mills Converse founded a little shoe factory named Converse. He loved basketball and wanted to produce special shoes for this very young sport.</p>
</div>
</div>
</td>
<td data-th="Size" class="text-right hidden-xs">38</td>
<td data-th="Price" class="text-right hidden-xs">$109.99</td>
<td data-th="Quantity" class="text-right">
1
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-sm btn-default">-</button>
<button type="button" class="btn btn-sm btn-default">+</button>
</div>
</td>
<td data-th="Subtotal" class="text-right">$109.99</td>
<td class="actions" data-th="">
<button class="btn btn-default btn-sm"><i class="fa fa-trash-o"></i></button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td class="hidden-xs" colspan="2"></td>
<td class="text-right">Total</td>
<td class="text-right"><strong>$109.99</strong></td>
<td></td>
</tr>
<tr class="no-border">
<td><a href="#" class="btn btn-default "><i class="fa fa-angle-left"></i> Continue Shopping</a></td>
<td colspan="2" class="hidden-xs"></td>
<td></td>
<td colspan="2"><a href="#" class="btn btn-success btn-block">Checkout <i class="fa fa-angle-right"></i></a></td>
</tr>
</tfoot>
</table>
</div>
The CSS Code:
.container{
max-width: 1000px;
}
.table>thead>tr.names>th{
border-bottom: 1px;
}
.table>tbody>tr.item>td{
padding-bottom: 20px;
padding-top: 20px;
vertical-align: middle;
}
.table>tfoot>tr.no-border>td{
border-top: 0 none;
padding-top: 20px;
}
.img-product{
padding-top: 20px;
}
See the whole code in action here
Conclusion
Folks, this is the end of the basic tutorial for Bootsrap Tables. Now you should be able to generate them in no time. Leave a comment here or write me if you have any questions.
Now that you know know this maybe you want to learn how to code a Working Bootstrap Contact Form . Be sure to follow /Â subscribe to BootstrapBay to get more.
P.S.: The snippet code used in this tutorial is from this source.
