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
