Bootstrap 3 Tables example

Whenever you need the large data to represent in statistic form than tables are the best way to represent them. Bootstrap provides complete default classes for tables in all possible manner with specific CSS classes for multiple use. Here we have compiled general info on Bootstrap table with suitable examples:

How to Design tables in Bootstrap 3?

They follow the structure of HTML tags only but with specific bootstrap class. It depends on how you want to let the user view your table with more appeal and better he or she can understand the point.

  • First of all you start with <table> tag and add specific classes
  • Then <thead> and add your main headings within <th> tag in the <tr> rows respectively.
  • Than main data in the <tr> with <td> for showing data in regular manners
  • You can give individual classes, colors to rows, cells and heading as design required

Bootstrap Table CSS

Here we have precisely shortlisted some of the key CSS attributes for Bootstrap Table.

//Default Table CSS
.table>thead>tr>th{vertical-align:bottom;border-bottom:2px solid #ddd;}
.table>thead>tr>th,.table>tbody>tr>th,.table>tfoot>tr>th,.table>thead>tr>td,.table > tbody > tr > td,.table > tfoot > tr > td {
padding:8px;line-height: 1.42857143;  vertical-align: top;  border-top: 1px solid #ddd;}

Default Table Layout in Bootstrap 3

Below given html structure is the default structure for Bootstrap table.

<div class="container">
    <table class="table">
<thead><tr><th>Row</th><th>Table Type</th><th>Specific CSS Class</th><th>Try it Editor</th></tr></thead>
<tr><td>1</td><td>Striped rows</td><td>.table-striped</td><td>Try it now</td></tr>
<tr><td>2</td><td>Bordered table</td><td>.table-bordered</td><td>Try it now</td></tr>
<tr><td>3</td><td>Table with hover rows</td><td>.table-hover</td><td>Try it now</td></tr>
<tr><td>4</td><td>Condensed table</td><td>.table-condensed</td><td>Try it now</td></tr>
<tr><td>5</td><td>Responsive tables</td><td>.table-responsive</td><td>Try it now</td></tr>          

default bootstrap 3 table example

Bootstrap 3 Table Styles

Check out these basic set of table styles that are provided with bootstrap.

RowTable TypeSpecific CSS ClassTry it Editor
1Striped rows.table-stripedTry it now
2Bordered table.table-borderedTry it now
3Table with hover rows.table-hoverTry it now
4Condensed table.table-condensedTry it now
5Responsive tables.table-responsiveTry it now

Note : If you are looking to color individual cells specifically or rows to improve your UI behaviour, all contextual classes are available i.e add appropriate classes to the design as required i.e. <tr class=”success”>, <td class=”active”>, <td class=”danger”>, <td class=”info”>.

Bootstrap 3 Table Color

You can use all contextual colors that are default given in Bootstrap utility classes i.e. active, success, info, warning, danger to get the desired color for table presentation.

Bootstrap 3 Change Table Color

One can assign different Color by changing the respective color of the elements to get the desired results more effectively.

RowDefault colorNew colorTry it Editor
Bootstrap 3 change table Background colorTransparentlightgreyTry it now
Bootstrap 3 change table Header background ColorTransparentredTry it now
Bootstrap 3 change table row background ColorTransparentGreenTry it now
Bootstrap 3 Change table border Color#dddBlackTry it now
Bootstrap 3 Change table Hover ColorTry it now
bootstrap 3 Table striped Change ColorgreyredTry it now
Bootstrap 3 table cell ColorTransparentContextual ColorTry it now

Bootstrap 3 Bordered Table Example

In this you have to specifically use class .table-bordered to get border around all your table cells respectively. This specific class add {border:1px solid #ddd!important} value to the corresponding table that imparts the bordered layout.
Bordered table example in Bootstrap

Bootstrap 3 Striped Table Example

With Class .table-striped you will get table rows in two different color. With this class you will get every odd color to be have specific color to be stripped pattern.


bootstrap 3 striped table example

Bootstrap 3 Table with hover rows Example

.table-hover class is added to make table rows change color on hover accordingly. It has following default CSS values that gives it bootstrap table hover to the whole table layout.


Bootstrap 3 Condensed Table Example

To make condensed table in Bootstrap you need to add .table-condensed specific class to the table structure which will impart the desired behavior.

Bootstrap 3 Responsive Table Example

To make bootstrap table responsive you must add .table-responsive class to the default table structure respectively.

Bootstrap responsive table CSS :

.table-responsive {
  overflow-x: auto;
  min-height: 0.01%;
@media screen and (max-width: 767px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;

twitter bootstrap responsive table example

Bootstrap 3 Table Template

Check out simple Bootstrap Table Template with different features and funcitonalities

You may also like...

Leave a Reply

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