Bootstrap is a web design framework consisting of HTML, CSS, and JavaScript codes. This framework is a powerful tool for designing responsive web pages and has various components such as tables. Tables are one of the essential components in web design, which can also be used in Bootstrap . Using Bootstrap CSS classes, you can create a beautiful and editable table (even an RTL table) with a regular structure.
Basic table
By adding the “table” class to the table element, you can create tables with a simple style that has horizontal separators and small cell padding.
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
</tr>
</tbody>
#
First Name
Last Name
1
Mark
Otto
2
Jacob
Thornton
Striped rows
The table-striped class in Bootstrap makes the table have striped rows.
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>Hoverable rows
The table-hover class adds a light gray background to the rows, this background color is visible when the cursor is over them.
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>Border table
By adding the table-bordered class to the table, border lines are added around the entire table.
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>Borderless table
Adding the table-borderless class will make the internal lines and border lines disappear in the table and will be shown in a simple way.
<table class="table table-borderless">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>Bootstrap Checkboxes table
A checkbox is a component that allows the user to make multiple choices, widely used in forms and surveys.
<table class="table">
<thead>
<tr>
<th scope="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />
</div>
</th>
<th scope="col">Lorem</th>
<th scope="col">Ipsum</th>
<th scope="col">Dolor</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />
</div>
</th>
<td>Sit</td>
<td>Amet</td>
<td>Consectetur</td>
</tr>
<tr>
<th scope="row">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />
</div>
</th>
<td>Adipisicing</td>
<td>Elit</td>
<td>Sint</td>
</tr>
</tbody>Table head
Similar to tables, use the “thead-light” or “thead-dark” modifier classes to make the <thead> tags appear light or dark gray.
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col"> First Name </th>
<th scope="col"> Last Name </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
</tr>
</tbody>Small table
The “table-sm” class makes tables more compact by halving cell layers.
<table class="table table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col"> First Name </th>
<th scope="col">Last Name </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
</tr>
</tbody>Contextual classes
Contextual classes allow us to change the background color of table rows or specific cells of our table.
active: Applies floating color to a specific row or cell.
success: indicates a positive or successful action.
danger: Indicates a dangerous or potentially negative action.
<table class = "table">
<thead>
<tr>
<th>Product</th>
<th>Payment Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class = "active">
<td>Product 1</td>
<td>23/11/2013</td>
<td>Pending</td>
</tr>
<tr class = "success">
<td>Product 2</td>
<td>10/11/2013</td>
<td>Delivered</td>
</tr>
<tr class = "danger">
<td>Product 3</td>
<td>20/10/2013</td>
<td>Declined</td>
</tr>
</tbody>
</table> condensed Bootstrap table
By adding the table-condensed class, row spacing is halved to compress the table.
<table class = "table table-condensed">
<caption>Condensed Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table> Responsive Bootstrap table
By placing the table-responsive class, we can scroll the table horizontally on small devices (below 768px). When viewing the table on a device with a width larger than 768 pixels, we will not see any difference in these tables.
<div class = "table-responsive">
<table class = "table">
<thead>
<tr>
<th>Product</th>
<th>Payment Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product 1</td>
<td>23/11/2013</td>
<td>Pending</td>
</tr>
<tr>
<td>Product 2</td>
<td>10/11/2013</td>
<td>Delivered</td>
</tr>
<tr>
<td>Product 3</td>
<td>20/10/2013</td>
<td>In Call to confirm</td>
</tr>
</tbody>
</table>
</div>
Post navigation
