Search within TutorialsPark

Twitter Bootstrap Tables


To Create Tables with great Layouts and styles


Twitter Bootstrap: Basic Tables

1. A simple basic table can be created using class="table" with table element <table>.

Example: Twitter Bootstrap Basic Tables

Give it a TRY! »

Twitter Bootstrap : Striped Table

1. A striped table can be created using class="table table-striped" with table element <table>.

Example:Twitter Bootstrap Striped Table

Give it a TRY! »

Twitter Bootstrap: Bordered Tables

1. A bordered table can be created using class="table table-bordered" with element <table>.

Example:Twitter Bootstrap Bordered Table

Give it a TRY! »


Twitter Bootstrap: Hover Tables

1. A Hover table can be created using class="table table-hover" with table element <table>.

Example:Twitter Bootstrap Hover Tables

Give it a TRY! »


Twitter Bootstrap: Condensed Tables

1. A Condensed table can be created using class="table table-condensed" with table element <table>. The row padding has been reduced to half to condense the table.

Example:Twitter Bootstrap Condensed Table

Give it a TRY! »

Twitter Bootstrap: Table Row Classes

1. The color of the background of table rows can be changed using table row classes

Here, class="success" : denotes a successful or positive action.

class="danger" : to denote a dangerous or potentially negative action.

class="warning" : to denote a warning that might require an attention

class="info" : to denote a neutral informative change or action

class="active" : to change the backgrounf of row to the hover color

Example:Twitter Bootstrap Contextual Classes for Table rows

Give it a TRY! »

Twitter Bootstrap: Responsive Tables

To create a responsive table, simply add the the table within the a div element with class table-responsive

Example:Twitter Bootstrap Blockquotes

Give it a TRY! » Note: It creates a thick grey border to the left side.