Bootstrap 5 bordered table has borders on all sides of the table and cells. Add .table
, and .table-bordered
classes to the <table>
to create a bordered table in Bootstrap 5.
General Syntax
<table class="table table-bordered"></table>
Source Code
<table class="table table-bordered">
<thead>
<tr>
<th>Fruits</th>
<th>Price(/kg)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mango</td>
<td>25$</td>
</tr>
<tr>
<td>Orange</td>
<td>35$</td>
</tr>
<tr>
<td>Grapes</td>
<td>45$</td>
</tr>
</tbody>
</table>
Fruits | Price(/kg) |
---|---|
Mango | 25$ |
Orange | 35$ |
Grapes | 45$ |
In the above example, .table
class is used to create a simple Bootstrap 5 table. To make it bordered, use .table-bordered
class.
Bootstrap 5 bordered striped table can be created by assigning .table
,.table-bordered
, and .table-striped
classes to the
<table>
.
General Syntax
<table class="table table-bordered table-striped"></table>
Source Code
<table class="table table-bordered table-striped">
<thead>
<th>Tutorials</th>
<th>Platforms</th>
</thead>
<tbody>
<tr>
<td>Bootstrap 5</td>
<td>sudhakarinfotech</td>
</tr>
<tr>
<td>Bootstrap 4</td>
<td>sudhakarinfotech</td>
</tr>
<tr>
<td>Bulma</td>
<td>sudhakarinfotech</td>
</tr>
</tbody>
</table>
Tutorials | Platforms |
---|---|
Bootstrap 5 | sudhakarinfotech |
Bootstrap 4 | sudhakarinfotech |
Bulma | sudhakarinfotech |
Here, .table
class is used to make a simple Bootstrap 5 table and .table-bordered
class is used to add horizontal border in the Bootstrap 5 simple table. At the end, .table-striped
class is used to create striped table.
To create a responsive Bootstrap bordered table, Add the .table
,and .table-bordered
classes to the <table>
, and puts it into an external wrapper i.e. div, and assign it to .table-responsive
class.
General Syntax
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Source Code
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>Web Developer</td>
<td>2000$</td>
</tr>
<tr>
<td>Jane</td>
<td>Mobile Developer</td>
<td>2500$</td>
</tr>
<tr>
<td>Smith Dev</td>
<td>Graphics Designer</td>
<td>1400$</td>
</tr>
</tbody>
</table>
</div>
Name | Designation | Salary |
---|---|---|
Smith | Web Developer | 2000$ |
Jane | Mobile Developer | 2500$ |
Smith Dev | Graphics Designer | 1400$ |
Here, .table-responsive
class is responsible to make the table responsive in Bootstrap 5 at all breakpoints.