Components
Table
Example
Default table
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
HTML
React
Web Component
Copy <div class= "table-responsive-lg" >
<table class= "table" >
<thead>
<tr>
<th scope= "col" > #</th>
<th scope= "col" > First</th>
<th scope= "col" > Last</th>
<th scope= "col" > Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope= "row" > 1</th>
<td> Mark</td>
<td> Otto</td>
<td> @mdo</td>
</tr>
<tr>
<th scope= "row" > 2</th>
<td> Jacob</td>
<td> Thornton</td>
<td> @fat</td>
</tr>
<tr>
<th scope= "row" > 3</th>
<td colspan= "2" > Larry the Bird</td>
<td> @twitter</td>
</tr>
</tbody>
</table>
</div>
[**DEV**]View on React storybook
View on Web component storybook
Small table
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
HTML
React
Web Component
Copy <div class= "table-responsive-lg" >
<table class= "table table-sm" >
<thead>
<tr>
<th scope= "col" > #</th>
<th scope= "col" > First</th>
<th scope= "col" > Last</th>
<th scope= "col" > Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope= "row" > 1</th>
<td> Mark</td>
<td> Otto</td>
<td> @mdo</td>
</tr>
<tr>
<th scope= "row" > 2</th>
<td> Jacob</td>
<td> Thornton</td>
<td> @fat</td>
</tr>
<tr>
<th scope= "row" > 3</th>
<td colspan= "2" > Larry the Bird</td>
<td> @twitter</td>
</tr>
</tbody>
</table>
</div>
[**DEV**]View on React storybook
View on Web component storybook
Striped body
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
HTML
React
Web Component
Copy <div class= "table-responsive-lg" >
<table class= "table table-striped" >
<thead>
<tr>
<th scope= "col" > #</th>
<th scope= "col" > First</th>
<th scope= "col" > Last</th>
<th scope= "col" > Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope= "row" > 1</th>
<td> Mark</td>
<td> Otto</td>
<td> @mdo</td>
</tr>
<tr>
<th scope= "row" > 2</th>
<td> Jacob</td>
<td> Thornton</td>
<td> @fat</td>
</tr>
<tr>
<th scope= "row" > 3</th>
<td colspan= "2" > Larry the Bird</td>
<td> @twitter</td>
</tr>
</tbody>
</table>
</div>
[**DEV**]View on React storybook
View on Web component storybook
Bordered body
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
HTML
React
Web Component
Copy <div class= "table-responsive-lg" >
<table class= "table table-bordered" >
<thead>
<tr>
<th scope= "col" > #</th>
<th scope= "col" > First</th>
<th scope= "col" > Last</th>
<th scope= "col" > Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope= "row" > 1</th>
<td> Mark</td>
<td> Otto</td>
<td> @mdo</td>
</tr>
<tr>
<th scope= "row" > 2</th>
<td> Jacob</td>
<td> Thornton</td>
<td> @fat</td>
</tr>
<tr>
<th scope= "row" > 3</th>
<td colspan= "2" > Larry the Bird</td>
<td> @twitter</td>
</tr>
</tbody>
</table>
</div>
[**DEV**]View on React storybook
View on Web component storybook
Borderless body
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
HTML
React
Web Component
Copy <div class= "table-responsive-lg" >
<table class= "table table-borderless" >
<thead>
<tr>
<th scope= "col" > #</th>
<th scope= "col" > First</th>
<th scope= "col" > Last</th>
<th scope= "col" > Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope= "row" > 1</th>
<td> Mark</td>
<td> Otto</td>
<td> @mdo</td>
</tr>
<tr>
<th scope= "row" > 2</th>
<td> Jacob</td>
<td> Thornton</td>
<td> @fat</td>
</tr>
<tr>
<th scope= "row" > 3</th>
<td colspan= "2" > Larry the Bird</td>
<td> @twitter</td>
</tr>
</tbody>
</table>
</div>
[**DEV**]View on React storybook
View on Web component storybook
Hoverable body
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
HTML
React
Web Component
Copy <div class= "table-responsive-lg" >
<table class= "table table-hover" >
<thead>
<tr>
<th scope= "col" > #</th>
<th scope= "col" > First</th>
<th scope= "col" > Last</th>
<th scope= "col" > Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope= "row" > 1</th>
<td> Mark</td>
<td> Otto</td>
<td> @mdo</td>
</tr>
<tr>
<th scope= "row" > 2</th>
<td> Jacob</td>
<td> Thornton</td>
<td> @fat</td>
</tr>
<tr>
<th scope= "row" > 3</th>
<td colspan= "2" > Larry the Bird</td>
<td> @twitter</td>
</tr>
</tbody>
</table>
</div>
[**DEV**]View on React storybook
View on Web component storybook
Dark table
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
HTML
React
Web Component
Copy <div class= "table-responsive-lg" >
<table class= "table table-dark" >
<thead>
<tr>
<th scope= "col" > #</th>
<th scope= "col" > First</th>
<th scope= "col" > Last</th>
<th scope= "col" > Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope= "row" > 1</th>
<td> Mark</td>
<td> Otto</td>
<td> @mdo</td>
</tr>
<tr>
<th scope= "row" > 2</th>
<td> Jacob</td>
<td> Thornton</td>
<td> @fat</td>
</tr>
<tr>
<th scope= "row" > 3</th>
<td colspan= "2" > Larry the Bird</td>
<td> @twitter</td>
</tr>
</tbody>
</table>
</div>
[**DEV**]View on React storybook
View on Web component storybook
Responsive table
Across every breakpoint, use .table-responsive
for horizontally scrolling tables. Use
.table-responsive{-sm|-md|-lg|-xl|-xxl}
as needed to create responsive tables up to a particular
breakpoint.
#
First
Last
Handle
#
First
Last
Handle
#
First
Last
Handle
1
Mark
Otto
@mdo
Mark
Otto
@mdo
Mark
Otto
@mdo
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
Jacob
Thornton
@fat
Jacob
Thornton
@fat
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Larry the Bird
@twitter
Larry the Bird
@twitter
Larry the Bird
@twitter
HTML
React
Web Component
Copy <div class= "table-responsive" >
<table class= "table" >
<thead>
<tr>
<th scope= "col" > #</th>
<th scope= "col" > First</th>
<th scope= "col" > Last</th>
<th scope= "col" > Handle</th>
<th scope= "col" > #</th>
<th scope= "col" > First</th>
<th scope= "col" > Last</th>
<th scope= "col" > Handle</th>
<th scope= "col" > #</th>
<th scope= "col" > First</th>
<th scope= "col" > Last</th>
<th scope= "col" > Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope= "row" > 1</th>
<td> Mark</td>
<td> Otto</td>
<td> @mdo</td>
<td> Mark</td>
<td> Otto</td>
<td> @mdo</td>
<td> Mark</td>
<td> Otto</td>
<td> @mdo</td>
<td> Mark</td>
<td> Otto</td>
<td> @mdo</td>
</tr>
<tr>
<th scope= "row" > 2</th>
<td> Jacob</td>
<td> Thornton</td>
<td> @fat</td>
<td> Jacob</td>
<td> Thornton</td>
<td> @fat</td>
<td> Jacob</td>
<td> Thornton</td>
<td> @fat</td>
<td> Jacob</td>
<td> Thornton</td>
<td> @fat</td>
</tr>
<tr>
<th scope= "row" > 3</th>
<td colspan= "2" > Larry the Bird</td>
<td> @twitter</td>
<td colspan= "2" > Larry the Bird</td>
<td> @twitter</td>
<td colspan= "2" > Larry the Bird</td>
<td> @twitter</td>
<td colspan= "2" > Larry the Bird</td>
<td> @twitter</td>
</tr>
</tbody>
</table>
</div>
[**DEV**]View on React storybook
View on Web component storybook
Usage guidelines
Table should be used:
When you want to show tabular information, such as statistics.
For displaying directories where content of similar nature and structure are grouped together.
Table should not be used:
For complex data visualisation, you may want to use inforgraphics or bars and charts.
For dashboard displays. Table data should follow a consistant structure with logical headers, rows and columns.
Usability guidelines
Keep tables simple
Tables are useful when displaying data and complex information. Try to use minimal visual styling to surface
information easily.
Consider mobile applications
As table rows can be long in nature, do consider if your content requires to be in a table.
Enable sorting
Do enable sorting where applicable as this will help users move through content within the table.
Table design tokens $table-cell-padding-y : 1rem ! default ;
$table-cell-padding-x : 1rem ! default ;
$table-cell-padding-y-sm : .5rem ! default ;
$table-cell-padding-x-sm : .5rem ! default ;
$table-cell-vertical-align : top ! default ;
$table-color : $body-color ! default ;
$table-bg : transparent ! default ;
$table-accent-bg : transparent ! default ;
$table-th-font-weight : null ! default ;
$table-striped-color : $table-color ! default ;
$table-striped-bg-factor : .05 ! default ;
$table-striped-bg : rgba ( $black , $table-striped-bg-factor ) ! default ;
$table-active-color : $table-color ! default ;
$table-active-bg-factor : .1 ! default ;
$table-active-bg : rgba ( $black , $table-active-bg-factor ) ! default ;
$table-hover-color : $table-color ! default ;
$table-hover-bg-factor : .075 ! default ;
$table-hover-bg : rgba ( $black , $table-hover-bg-factor ) ! default ;
$table-border-factor : .1 ! default ;
$table-border-width : $border-width ! default ;
$table-border-color : $gray-400 ! default ;
$table-striped-order : odd ! default ;
$table-group-separator-color : currentColor ! default ;
$table-caption-color : $text-muted ! default ;
$table-bg-scale : 100% ! default ;
$table-variants : ( "primary" : shift-color ( $primary , $table-bg-scale ) ,
" secondary " : shift-color ( $secondary , $table-bg-scale ) ,
" success " : shift-color ( $success , $table-bg-scale ) ,
" info " : shift-color ( $info , $table-bg-scale ) ,
" warning " : shift-color ( $warning , $table-bg-scale ) ,
" danger " : shift-color ( $danger , $table-bg-scale ) ,
" light " : $light ,
" dark " : $dark ,
) ! default ;