twitter bootstrap table example tutorial

 twitter bootstrap table example tutorial

twitter bootstrap table example tutorial

Twitter bootstrap table can be styled and well designed. Do you want to know that ? You can style p your table just adding some classes on your table and it’ll looks nice. You mat use it on your data report, showing information etc. We’re trying to discus twitter bootstrap table example tutorial here.

Twitter bootstrap table example tutorial content :

  • basic table
  • Striped rows
  • Bordered table
  • Hover rows
  • Condensed table
  • Contextual classes
  • Responsive tables

Basic Table :

To style basic table, you’ve to add class .table to your <table> code. That means : class=”table” on any table

# Name Address mail
1 Thomas bell Brick lane, London thomas@yahoo.com
2 Yan Chapel Toronto Australia Yan@yahoo.com
3 Pit Sampras Berlin, Germany Pit @yahoo.com
<table class="table" width="647">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Address</th>
<th>mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Thomas bell</td>
<td>Brick lane, London</td>
<td>thomas@yahoo.com</td>
</tr>
<tr>
<td height="29">2</td>
<td>Yan Chapel</td>
<td>Toronto Australia</td>
<td>Yan@yahoo.com</td>
</tr>
<tr>
<td>3</td>
<td>Pit Sampras</td>
<td>Berlin, Germany</td>
<td>Pit @yahoo.com</td>
</tr>
</tbody>
</table>


Striped rows Table :

For getting striped rows table, you’ve to add class table table-striped

# Name Address mail
1 Thomas bell Brick lane, London thomas@yahoo.com
2 Yan Chapel Toronto Australia Yan@yahoo.com
3 Pit Sampras Berlin, Germany Pit @yahoo.com

Here is the markup for striped rows table of twitter bootstrap:

<table class="table table-striped" width="647">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Address</th>
<th>mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Thomas bell</td>
<td>Brick lane, London</td>
<td>thomas@yahoo.com</td>
</tr>
<tr>
<td height="29">2</td>
<td>Yan Chapel</td>
<td>Toronto Australia</td>
<td>Yan@yahoo.com</td>
</tr>
<tr>
<td>3</td>
<td>Pit Sampras</td>
<td>Berlin, Germany</td>
<td>Pit @yahoo.com</td>
</tr>
</tbody>
</table>


Hover Twitter bootstrap table

You can get hover styled table on twitter bootstrap. Class is class=”table table-hover”

# Sample Name Address Mail
1 Thomas bell Brick lane, London thomas@yahoo.com
2 Yan Chapel Toronto Australia Yan@yahoo.com
3 Pit Sampras Berlin, Germany Pit @yahoo.com
Border table

The HTML markup for this is :

<table class="table table-bordered table-hover" width="647">
<thead>
<tr>
<th>#</th>
<th>Sample Name</th>
<th>Address</th>
<th>Mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Thomas bell</td>
<td>Brick lane, London</td>
<td>thomas@yahoo.com</td>
</tr>
<tr>
<td height="29">2</td>
<td>Yan Chapel</td>
<td>Toronto Australia</td>
<td>Yan@yahoo.com</td>
</tr>
<tr>
<td>3</td>
<td>Pit Sampras</td>
<td>Berlin, Germany</td>
<td>Pit @yahoo.com</td>
</tr>
<tr>
<td></td>
<td colspan="3" align="center">Border table</td>
</tr>
</tbody>
</table>

Condensed table :

Compacting a table you need to add class class=”table table-condensed” .

# Sample Name Address Mail
1 Thomas bell Brick lane, London thomas@yahoo.com
2 Yan Chapel Toronto Australia Yan@yahoo.com
3 Pit Sampras Berlin, Germany Pit @yahoo.com

The html Markup is :

<table class="table table-condensed" width="647">
<thead>
<tr>
<th>#</th>
<th>Sample Name</th>
<th>Address</th>
<th>Mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Thomas bell</td>
<td>Brick lane, London</td>
<td>thomas@yahoo.com</td>
</tr>
<tr>
<td height="29">2</td>
<td>Yan Chapel</td>
<td>Toronto Australia</td>
<td>Yan@yahoo.com</td>
</tr>
<tr>
<td>3</td>
<td>Pit Sampras</td>
<td>Berlin, Germany</td>
<td>Pit @yahoo.com</td>
</tr>
<tr>
<td></td>
<td colspan="3" align="center"></td>
</tr>
</tbody>
</table>

Contextual classes :

You can styled more your table with contextual classes.

.active Applies the hover color to a particular row or cell
.success Indicates a successful or positive action
.warning Indicates a warning that might need attention
.danger Indicates a dangerous or potentially negative action

Contextual classes Example :

# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 success Column content Column content
5 danger Row Column content Column content
6 warning row Column content Column content
7 info row Column content Column content

The Markup :

<table class="table table-striped table-bordered table-hover" width="744">
<thead>
<tr>
<th>#</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<td>2</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<td>3</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="success">
<td>4</td>
<td>success</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="danger">
<td>5</td>
<td>danger Row</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="warning">
<td>6</td>
<td>warning row</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="info">
<td>7</td>
<td>info row</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>


Responsive tables :

And here it comes, responsive table. You need to add a div with calss table-responsive

.active Applies the hover color to a particular row or cell
.success Indicates a successful or positive action
.warning Indicates a warning that might need attention
.danger Indicates a dangerous or potentially negative action
.active Applies the hover color to a particular row or cell
.success Indicates a successful or positive action
.warning Indicates a warning that might need attention
.danger Indicates a dangerous or potentially negative action

Markup :

<div class="table-responsive">
<table class="table table-bordered" width="625">
<tbody>
<tr>
<td><code>.active</code></td>
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<td><code>.success</code></td>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<td><code>.warning</code></td>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<td><code>.danger</code></td>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
</div>

And this is all for  twitter bootstrap table example tutorial.


  • Eddy Swane

    Good examples. But I just wanna report that “table-striped” and “danger” did not work in my browser. I’m currently using Google Chrome Version 44.0.2403.130 m