How to make Responsive Table in Bootstrap

Responsive Table in Bootstrap

Whenever the word Responsive comes to my mind, I think about Bootstrap.  It has completely changed our perception in the field of responsive website layouts. The latest version of Bootstrap is solely devoted to mobile first layouts and that makes it a highly responsive framework. Though most of the components of Bootstrap are responsive but the “tables” are not so yet. They are responsive until a certain point but if you keep narrowing your browser to check responsiveness of your tables, you will see a scrollbar bottom of your web browser and that makes a web layout look ugly. So how can we get rid of it? This tutorial will help you do just that. Of course you need to at least be familiar with Bootstrap table and so I shall not go into it in details. Here are our basic Bootstrap table codes:

And the output will be something similar to this:

Step 1

Now, if you want to check the responsiveness of your table, you may use your mobile phone, tablet or else you can use the Mozilla Firefox’s Responsive Design View mode and if you are using Google Chrome, you may use Responsive Web Design Tester mode. For Firefox Responsive Design View mode, press the shortcut key Ctrl+Shift+M. It will convert your browser window in to a flexible workspace so that you can manipulate the width and height of your workspace as you prefer. And for Chrome Responsive Web Design Tester mode, press the shortcut key Ctrl+Shift+C and manipulate the width as you want. Okay let us now get back to our main problem. If you’ve tested the responsiveness of your table, you may have noticed the scrollbar at the bottom of your browser. But simply wrapping your table within a simple CSS class will surprisingly hide your bottom scrollbar and add a scrollbar to your table instead.

Step 2

To do this, wrap your table within the class table-responsive and our final codes will be:

Now recheck the responsiveness of your table and you will find this:

Step 3

Wasn’t it amazing? Hope you enjoyed the tutorial and if you still have any doubts regarding anything within this tutorial, you may ask me by using the comment box bellow.

Comments

Nilotpal Singha

A professional graphic web designer, blogger, writer.

You may also like...