How To Create A Responsive Bootstrap Table

Yogi S
Apr 04, 2017
14.5k
0
6
Blog

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 the knowledge of 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

Click here to see the DEMO

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.