Bootstrap | Tables | Set-1

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.

  • Simple table: To create simple Bootstrap table, add table class within the <table> tag as given below.

    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>
      
          <!-- Bootstrap table class -->
          <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>
                <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-simple

  • Dark table: To make the table appear in dark background and light font, use the class table-dark along with the class table within <table> tag as given below.

    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-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>
                <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-dark

  • Heading appearance: To make the table heading appear in light gray color use the thead-light class within <thead> along with the table class within <table> or to make the table heading appear in dark gray color use the thead-dark class within <thead> along with the table class within <table>. 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, thead-light -->
          <table class="table">
            <thead class="thead-light">
              <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, thead-dark -->
          <table class="table">
            <thead class="thead-dark">
              <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-heading

  • Striped rows: To make the table appear in alternate dark and light rows, use the combination of classes table and table-striped within the <table> tag. We can also make the dark table appear in alternate light and dark rows by using the combination of classes table, table-dark, and table-striped 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-striped -->
          <table class="table table-striped">
            <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-striped, table-dark -->
          <table class="table table-striped 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-striped

  • Bordered table: To make the table and its each cell surrounded by borders, use the class table-bordered along with the class table within <table> tag. We can also make the dark table and its each cell surrounded by borders by using the combination of classes table, table-dark, table-bordered 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-bordered -->
          <table class="table table-bordered">
            <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-bordered, table-dark -->
          <table class="table table-bordered 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-bordered



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.