Bootstrap | Tables | Set-2

Bootstrap provides us series of classes that can be used to apply various styling to tables such as changing the heading appearance, making the rows striped, adding or removing borders, making rows hoverable. Bootstrap also provides classes for making tables responsive.

  • Borderless table: To make the table borderless use the class table-borderless along with the class table class within the <table> tag. We can also make the dark table borderless by using the combination of classes table, table-dark and table-borderless within the <table> tag. See the example below for illustration.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
      
        <title>Bootstrap | Tables</title>
      
        <style>
          h1{
            color: green;
            text-align: center;
          }
          div{
            margin-top: 10px;
          }
        </style>
      
      </head>
      <body>
        <div class="container">
          <h1>GeeksForGeeks</h1>
      
          <!-- table, table-borderless -->
          <table class="table table-borderless">
            <thead>
              <tr>
                <th scope="col">S. No.</td>
                <th scope="col">Name</td>
                <th scope="col">City</td>
                <th scope="col">Age</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">1</td>
                <td>Ajay</td>
                <td>Patna</td>
                <td>20</td>
              </tr>
              <tr>
                <th scope="row">2</td>
                <td>Rahul</td>
                <td>Chandigarh</td>
                <td>17</td>
              </tr>
              <tr>
                <th scope="row">3</td>
                <td>Parush</td>
                <td>Kolkata</td>
                <td>22</td>
              </tr>
            </tbody>
          </table>
      
          <!-- table, table-borderless, table-dark -->
          <table class="table table-borderless table-dark">
            <thead>
              <tr>
                <th scope="col">S. No.</td>
                <th scope="col">Name</td>
                <th scope="col">City</td>
                <th scope="col">Age</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">1</td>
                <td>Ajay</td>
                <td>Patna</td>
                <td>20</td>
              </tr>
              <tr>
                <th scope="row">2</td>
                <td>Rahul</td>
                <td>Chandigarh</td>
                <td>17</td>
              </tr>
              <tr>
                <th scope="row">3</td>
                <td>Parush</td>
                <td>Kolkata</td>
                <td>22</td>
              </tr>
            </tbody>
          </table>
      
        </div>
      </body>
    </html>

    chevron_right

    
    

    Output:
    bootstrap-table-borderless

  • Hoverable table: To make the rows of table hoverable use the class table-hover along with the class table within the <table> tag. We can also make the rows of dark table hoverable using the combination of classes table, table-hover, and table-dark within the <table> tag. See the example below for illustration.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
      
        <title>Bootstrap | Tables</title>
      
        <style>
          h1{
            color: green;
            text-align: center;
          }
          div{
            margin-top: 10px;
          }
        </style>
      
      </head>
      <body>
        <div class="container">
          <h1>GeeksForGeeks</h1>
      
          <!-- table, table-hover -->
          <table class="table table-hover">
            <thead>
              <tr>
                <th scope="col">S. No.</td>
                <th scope="col">Name</td>
                <th scope="col">City</td>
                <th scope="col">Age</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">1</td>
                <td>Ajay</td>
                <td>Patna</td>
                <td>20</td>
              </tr>
              <tr>
                <th scope="row">2</td>
                <td>Rahul</td>
                <td>Chandigarh</td>
                <td>17</td>
              </tr>
              <tr>
                <th scope="row">3</td>
                <td>Parush</td>
                <td>Kolkata</td>
                <td>22</td>
              </tr>
            </tbody>
          </table>
      
          <!-- table, table-hover, table-dark -->
          <table class="table table-hover table-dark">
            <thead>
              <tr>
                <th scope="col">S. No.</td>
                <th scope="col">Name</td>
                <th scope="col">City</td>
                <th scope="col">Age</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">1</td>
                <td>Ajay</td>
                <td>Patna</td>
                <td>20</td>
              </tr>
              <tr>
                <th scope="row">2</td>
                <td>Rahul</td>
                <td>Chandigarh</td>
                <td>17</td>
              </tr>
              <tr>
                <th scope="row">3</td>
                <td>Parush</td>
                <td>Kolkata</td>
                <td>22</td>
              </tr>
            </tbody>
          </table>
      
        </div>
      </body>
    </html>

    chevron_right

    
    

    Output:
    bootstrap-table-hoverable



  • Small table: To make the table smaller in size use the class table-sm along with the class table within the <table> tag. This reduces the cell padding to half. To make the dark table smaller in size use the combination of classes table, table-sm, and table-dark within the <table> tag. See the example below for illustration.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
      
        <title>Bootstrap | Tables</title>
      
        <style>
          h1{
            color: green;
            text-align: center;
          }
          div{
            margin-top: 10px;
          }
        </style>
      
      </head>
      <body>
        <div class="container">
          <h1>GeeksForGeeks</h1>
      
          <!-- table, table-sm -->
          <table class="table table-sm">
            <thead>
              <tr>
                <th scope="col">S. No.</td>
                <th scope="col">Name</td>
                <th scope="col">City</td>
                <th scope="col">Age</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">1</td>
                <td>Ajay</td>
                <td>Patna</td>
                <td>20</td>
              </tr>
              <tr>
                <th scope="row">2</td>
                <td>Rahul</td>
                <td>Chandigarh</td>
                <td>17</td>
              </tr>
              <tr>
                <th scope="row">3</td>
                <td>Parush</td>
                <td>Kolkata</td>
                <td>22</td>
              </tr>
            </tbody>
          </table>
      
          <!-- table, table-sm, table-dark -->
          <table class="table table-sm table-dark">
            <thead>
              <tr>
                <th scope="col">S. No.</td>
                <th scope="col">Name</td>
                <th scope="col">City</td>
                <th scope="col">Age</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">1</td>
                <td>Ajay</td>
                <td>Patna</td>
                <td>20</td>
              </tr>
              <tr>
                <th scope="row">2</td>
                <td>Rahul</td>
                <td>Chandigarh</td>
                <td>17</td>
              </tr>
              <tr>
                <th scope="row">3</td>
                <td>Parush</td>
                <td>Kolkata</td>
                <td>22</td>
              </tr>
            </tbody>
          </table>
      
        </div>
      </body>
    </html>

    chevron_right

    
    

    Output:

    bootstrap-table-small

  • Colored table: Bootstrap provides us a number of contextual classes that can be used to color the entire row or a single cell of table. These classes should be used with the light table and not with the dark table for better appearance. To color dark tables, we can use the background color classes of Bootstrap. The contextual classes are given below. See the example for illustration.
    table-primary table-secondary table-success
    table-danger table-warning table-info
    table-light table-dark table-active

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
      
        <title>Bootstrap | Tables</title>
      
        <style>
          h1{
            color: green;
            text-align: center;
          }
          div{
            margin-top: 10px;
          }
        </style>
      
      </head>
      <body>
        <div class="container">
          <h1>GeeksForGeeks</h1>
      
          <!-- table, table-primary, table-warning, table-danger -->
          <table class="table">
            <thead>
              <tr>
                <th scope="col">S. No.</td>
                <th scope="col">Name</td>
                <th scope="col">City</td>
                <th scope="col">Age</td>
              </tr>
            </thead>
            <tbody>
              <tr class="table-primary">
                <th scope="row">1</td>
                <td>Ajay</td>
                <td>Patna</td>
                <td>20</td>
              </tr>
              <tr class="table-warning">
                <th scope="row">2</td>
                <td>Rahul</td>
                <td>Chandigarh</td>
                <td>17</td>
              </tr>
              <tr class="table-danger">
                <th scope="row">3</td>
                <td>Parush</td>
                <td>Kolkata</td>
                <td>22</td>
              </tr>
            </tbody>
          </table>
      
          <!-- table, bg-danger, bg-primary, table-dark -->
          <table class="table table-dark">
            <thead>
              <tr>
                <th scope="col">S. No.</td>
                <th scope="col">Name</td>
                <th scope="col">City</td>
                <th scope="col">Age</td>
              </tr>
            </thead>
            <tbody>
              <tr class="bg-danger">
                <th scope="row">1</td>
                <td>Ajay</td>
                <td>Patna</td>
                <td>20</td>
              </tr>
              <tr>
                <th scope="row">2</td>
                <td>Rahul</td>
                <td>Chandigarh</td>
                <td>17</td>
              </tr>
              <tr class="bg-primary">
                <th scope="row">3</td>
                <td>Parush</td>
                <td>Kolkata</td>
                <td>22</td>
              </tr>
            </tbody>
          </table>
      
        </div>
      </body>
    </html>

    chevron_right

    
    

    Output:

    bootstrap-table-colored

  • Responsive tables: To make the table responsive on all viewport size, wrap the table within a opening and closing <div> tags, having class table-responsive within the opening <div> tag. Similarly, to make the table responsive depending upon the viewport size, we use the class table-responsive{-sm|-md|-lg|-xl}, according to the viewport size according to which we want to make our table responsive.

    In responsive tables, a horizontal scroll bar will appear if the table does not fit within the viewport of current size.

    In case of viewport specific responsive table, table will become responsive if the viewport size is less than the viewport specified by the class table-responsive{-sm|-md|-lg|-xl}. See the examples below for illustration.

    Example 1: table-responsive

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
      
        <title>Bootstrap | Tables</title>
      
        <style>
          h1{
            color: green;
            text-align: center;
          }
          div{
            margin-top: 10px;
          }
        </style>
      
      </head>
      <body>
        <div class="container">
          <h1>GeeksForGeeks</h1>
      
          <!-- table-responsive -->
          <div class="table-responsive">
              
            <!-- table -->
            <table class="table">
              <thead>
                <tr>
                  <th scope="col">Head</td>
                  <th scope="col">Head</td>
                  <th scope="col">Head</td>
                  <th scope="col">Head</td>
                  <th scope="col">Head</td>
                  <th scope="col">Head</td>
                  <th scope="col">Head</td>
                  <th scope="col">Head</td>
                  <th scope="col">Head</td>
                  <th scope="col">Head</td>
                  <th scope="col">Head</td>
                  <th scope="col">Head</td>  
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                </tr>
                <tr>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                </tr>
                <tr>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                </tr>
              </tbody>
            </table>
      
          </div>
            
            
      
        </div>
      </body>
    </html>

    chevron_right

    
    

    Output:

    bootstrap-table-responsive

    Example 2: table-responsive-md

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
      
        <title>Bootstrap | Tables</title>
      
        <style>
          h1{
            color: green;
            text-align: center;
          }
          div{
            margin-top: 10px;
          }
        </style>
      
      </head>
      <body>
        <div class="container">
          <h1>GeeksForGeeks</h1>
      
          <!-- table-responsive-md -->
          <div class="table-responsive-md">
              
            <!-- table -->
            <table class="table">
              <thead>
                <tr>
                  <th scope="col">Head</td>
                  <th scope="col">Head</td>
                  <th scope="col">Head</td>
                  <th scope="col">Head</td>
                  <th scope="col">Head</td>
                  <th scope="col">Head</td>
                  <th scope="col">Head</td>
                  <th scope="col">Head</td>
                  <th scope="col">Head</td>
                  <th scope="col">Head</td>
                  <th scope="col">Head</td>
                  <th scope="col">Head</td>  
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                </tr>
                <tr>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                </tr>
                <tr>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                  <td>Data</td>
                </tr>
              </tbody>
            </table>
      
          </div>
            
            
      
        </div>
      </body>
    </html>

    chevron_right

    
    

    Output:

    bootstrap-table-responsive-md



My Personal Notes arrow_drop_up

Student, BCA

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.