Tables

Bootstrap makes styling tables very easy by just setting very few classes on a table. In the following we will discuss these available styles and of course play with some examples!

Basic Bootstrap table
The following example shows, how the most basic version of a table looks, by just setting the class table on the table-element.

Example

<table class="table">
	<tr>
		<th>#</th>
		<th>Player</th>
		<th>Points</th>
	</tr>
	<tr>
		<td>1</td>
		<td>Hornet</td>
		<td>34600</td>
	</tr>
</table>

Play with example »

Alternating row colors
In Bootstrap this is called striped. So to add alternating row-colors add the table-striped-class after the table-class, as in the example below:

Example

<table class="table table-striped">
	<!--... rest of the table ...-->
</table>

Play with example »

Row hover
Having a row-hover effect to make our table more dynamic is quite easy. We need only add the table-hover-class to the table-class and we’re done!

Example

<table class="table table-hover">
	<!--... rest of the table ...-->
</table>

Play with example »

Condensed table
Sometimes you have many rows – space is precious then. With the table-condensed-class everything is more narrow, meaning the space is used more efficient.

Example

<table class="table table-condensed">
	<!--... rest of the table ...-->
</table>

Play with example »

Contextual classes
Ever done conditional formating of rows in tables? For basic needs of row- and cell-formatting Bootstrap has the contextual classes available. The following five classes can be applied to rows and cells to provide immediate visual feedback to the user:

  • .active
  • .success
  • .info
  • .warning
  • .danger

Try the following example to see these classes in action:

Example

<table class="table">
	<!-- setting row -->
	<tr class="active">
		<td>2</td>
		<td>Content</td>
		<td>Content</td>
	</tr>
	<!-- setting single cell -->
	<tr>
		<td class="success">3</td>
		<td>Content</td>
		<td>Content</td>
	</tr>
	<!--... rest of the table ...-->

Play with example »