How to Bootstrap- Responsive Table

In this guide, we are going to learn how to render Bootstrap responsive table with the help of predefined Bootstrap classes. The Bootstrap gives you the greate looking table in a simple way. Let’s dive into Bootstrap table codes.

You can create tables with normal HTML tags, Bootstrap will automatically adjust the cell padding and other predefined styles, by adding .table class to the <table> element. Let’s create a simple table with .table class.

Bootstrap Example
      <table class="table">
         <thead>
            <tr>
                  <th>ID</th>
                  <th>Name</th>
                  <th>Email</th>
            </tr>
         </thead>
         <tbody>
            <tr>
                  <td>1</td>
                  <td>Anwar Yakkiparamban</td>
                  <td>anwar@mail.com</td>
           </tr>
           <tr>
                  <td>2</td>
                  <td>Habeeb Yakkiparamban</td>
                  <td>habeeb@mail.com</td>
           </tr>
           <tr>
                  <td>3</td>
                  <td>Muhsin Yakkiparamban</td>
                  <td>muhsin@mail.com</td>
           </tr>
         </tbody>
      </table>

 

Result
IDNameEmail
1Anwar Yakkiparambananwar@mail.com
2Habeeb Yakkiparambanhabeeb@mail.com
3Muhsin Yakkiparambanmuhsin@mail.com

 

Bootstrap Table with Striped Row

You can create a table with stripes on the row by adding the table-striped class, The following example shows you the demonstration.

Bootstrap Example
      <!--Striped table example-->
      <table class="table table-striped">
    
      </table>

 

Result
IDNameEmail
1Anwar Yakkiparambananwar@mail.com
2Habeeb Yakkiparambanhabeeb@mail.com
3Muhsin Yakkiparambanmuhsin@mail.com

 

Bootstrap Bordered Table

You can create a table with the border on each cell by adding the table-bordered class, The following example shows you the demonstration.

Bootstrap Example
      <!--Bordered table example-->
      <table class="table table-bordered">
    
      </table>

 

Result
IDNameEmail
1Anwar Yakkiparambananwar@mail.com
2Habeeb Yakkiparambanhabeeb@mail.com
3Muhsin Yakkiparambanmuhsin@mail.com

 

Bootstrap Hover Tables

You can create a table with hover enabled on rows cell by adding the table-hover class, The following example shows you the demonstration.

Bootstrap Example
      <!--Hover table example-->
      <table class="table table-hover">
    
      </table>

 

Result
IDNameEmail
1Anwar Yakkiparambananwar@mail.com
2Habeeb Yakkiparambanhabeeb@mail.com
3Muhsin Yakkiparambanmuhsin@mail.com

 

Bootstrap Condensed Table

You can also create a table with lower cell padding for condensation by adding the table-condensed class, Let’s see the example of condensed table.

Bootstrap Example
      <!--Hover table example-->
      <table class="table table-condensed">
    
      </table>

 

Result
IDNameEmail
1Anwar Yakkiparambananwar@mail.com
2Habeeb Yakkiparambanhabeeb@mail.com
3Muhsin Yakkiparambanmuhsin@mail.com

 

Bootstrap Responsive Table

You can create responsive tables with Bootstrap 3. To make a table responsive, place the table inside a <div> tag with class table-responsive .  With responsive table, you can make the table scroll horizontally up to small devices with screen size under 768px. When viewing on larger devices, you can’t see any difference in the table. Let’s see the example of a responsive table.

Bootstrap Example
      <!--Hover table example-->
      <div class="table-responsive">
        <table class="table table-bordered">
    
        </table>
      </div>

 

Result
IDNameEmail
1Anwar Yakkiparambananwar@mail.com
2Habeeb Yakkiparambanhabeeb@mail.com
3Muhsin Yakkiparambanmuhsin@mail.com

Anwar Yakkiparamban

Anwar Yakkiparamban is the founder of Lauyou Learning. Prior to Lauyou learning, Anwar worked at ARD Engineering & Development, Qatar. He holds bachelor degree in Electronics and Communication Engineering from Govt. Engineering College Idukki.

You may also like...