Basic Tables

Basic Table

Using the most basic table markup, here’s how .table-based tables look in Bootstrap.

Name Date of Birth Actions
Ashley Briggs Jun 21, 1961
Carl Jenkins May 15, 1948
Bertha Martin Sep 14, 1965
Stacie Hall Apr 2, 1971
Amanda Jones Oct 12, 1966
Striped Rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

Name Date of Birth Actions
Ashley Briggs Jun 21, 1961
Carl Jenkins May 15, 1948
Bertha Martin Sep 14, 1965
Stacie Hall Apr 2, 1971
Amanda Jones Oct 12, 1966
Condensed Table

Add .table-sm to make tables more compact by cutting cell padding in half.

Operation System Users Share
Windows 8.232 40%
Mac OS 3.322 20%
Linux 4.232 34%
FreeBSD 1.121 12%
Chrome OS 1.331 15%
Android 2.301 20%
iOS 1.162 14%
Windows Phone 562 7%
Other 1.181 14%
Hoverable Rows

Add .table-hover to enable a hover state on table rows within a <tbody>.

Name Date of Birth
Avatar Ashley Briggs Jun 21, 1961
Avatar Carl Jenkins May 15, 1948
Avatar Bertha Martin Sep 14, 1965
Avatar Stacie Hall Apr 2, 1971
Bordered Table

Add .table-bordered for borders on all sides of the table and cells.

Name Date of Birth Actions
Ashley Briggs Jun 21, 1961
Carl Jenkins May 15, 1948
Bertha Martin Sep 14, 1965
Stacie Hall Apr 2, 1971
Amanda Jones Oct 12, 1966
Contextual Classes

Use contextual classes to color table rows or individual cells.

Name Date of Birth Actions
Ashley Briggs Jun 21, 1961
Carl Jenkins May 15, 1948
Bertha Martin Sep 14, 1965
Stacie Hall Apr 2, 1971
Amanda Jones Oct 12, 1966
Always responsive

ARubyX every breakpoint, use .table-responsive for horizontally scrolling tables.

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell
New Group Contacts Groups Calls Settings
Help Privacy
Mayra Sibley
Active
Mayra Sibley

2 Hours

Hi there, I'm Jesse and you?
You

3 minutes

My name is Anne Clarc.
Mayra Sibley

40 seconds

Nice to meet you Anne.
How can i help you?