A Bootstrap table is basically an HTML table, which is responsive – it adjusts itself on all the screen sizes (desktops to smartphones). Thus, whatever is the screen size of Bootstrap table, it will automatically adjust itself and you don’t have to worry for anything. In this table, you can create any number of columns and any number of rows, which depends upon your needs.
To use a Bootstrap table in your Website, you should know how to use Bootstrap in your Website. This also includes knowledge of the Bootstrap grid system.
Thus, let me start with creating Bootstrap tables.
Where to put Bootstrap table in your Website
You have to place the Bootstrap table inside any column, where you want to show it. The column can be .col-xs-*, .col-sm-*, .col-md-* or .col-lg-*.
Bootstrap table code
Bootstrap table is given below, which has 1 column and 1 row in it.
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Column 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1</td>
</tr>
</tbody>
</table>
</div>
Now, let us create Bootstrap table of 1 column and 3 rows.
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Column 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
</tbody>
</table>
</div>
Similarly, a Bootstrap table of 3 columns and 3 rows will be, as shown below.
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
<td>Row 1 Column 3</td>
</tr>
<tr>
<td>Row 2 Column 1</td>
<td>Row 2 Column 2</td>
<td>Row 2 Column 3</td>
</tr>
<tr>
<td>Row 3 Column 1</td>
<td>Row 3 Column 2</td>
<td>Row 3 Column 3</td>
</tr>
</tbody>
</table>
</div>
Let’s make a bigger table, which contains 5 columns and 4 rows.
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
<td>Row 1 Column 3</td>
<td>Row 1 Column 4</td>
<td>Row 1 Column 5</td>
</tr>
<tr>
<td>Row 2 Column 1</td>
<td>Row 2 Column 2</td>
<td>Row 2 Column 3</td>
<td>Row 2 Column 4</td>
<td>Row 2 Column 5</td>
</tr>
<tr>
<td>Row 3 Column 1</td>
<td>Row 3 Column 2</td>
<td>Row 3 Column 3</td>
<td>Row 3 Column 4</td>
<td>Row 3 Column 5</td>
</tr>
<tr>
<td>Row 4 Column 1</td>
<td>Row 4 Column 2</td>
<td>Row 4 Column 3</td>
<td>Row 4 Column 4</td>
<td>Row 4 Column 5</td>
</tr>
</tbody>
</table>
</div>
Testing Bootstrap Table Responsive feature
You can now test it on your browser, all the tables which I have created will look full size on the big screen of laptops and desktops but on smaller size screens of the tablets and smartphones, the columns will have horizontal scrolling.
On laptops and desktops
On laptops and desktops, all the 4 tables will be fully visible.
On tablets
On tablets, the screens of all the 4 tables will be fully visible.
On smartphones
On smartphones screens (including all iphones 4 to 8 and Galaxy’s) the top 2 tables will be fully visible while the other 2 columns will have horizontal scrolling.
Summary
In this way, you can create responsive tables in Bootstrap and show your text in grid form. If you have any questions, please ask me. Thank you.
Check my C# Corner tutorials -