Open In App

Bootstrap | Tables | Set-1

Improve
Improve
Like Article
Like
Save
Share
Report

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

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

Example:

HTML




<!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=
          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.</th>
                    <th scope="col">Name</th>
                    <th scope="col">City</th>
                    <th scope="col">Age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Ajay</td>
                    <td>Patna</td>
                    <td>20</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Rahul</td>
                    <td>Chandigarh</td>
                    <td>17</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Parush</td>
                    <td>Kolkata</td>
                    <td>22</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
 
</html>


Output:

bootstrap-table-simple

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

Example:

HTML




<!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=
          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.</th>
                    <th scope="col">Name</th>
                    <th scope="col">City</th>
                    <th scope="col">Age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Ajay</td>
                    <td>Patna</td>
                    <td>20</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Rahul</td>
                    <td>Chandigarh</td>
                    <td>17</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Parush</td>
                    <td>Kolkata</td>
                    <td>22</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
 
</html>


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:

HTML




<!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=
          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.</th>
                    <th scope="col">Name</th>
                    <th scope="col">City</th>
                    <th scope="col">Age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Ajay</td>
                    <td>Patna</td>
                    <td>20</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Rahul</td>
                    <td>Chandigarh</td>
                    <td>17</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <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.</th>
                    <th scope="col">Name</th>
                    <th scope="col">City</th>
                    <th scope="col">Age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Ajay</td>
                    <td>Patna</td>
                    <td>20</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Rahul</td>
                    <td>Chandigarh</td>
                    <td>17</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Parush</td>
                    <td>Kolkata</td>
                    <td>22</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
 
</html>


Output:

bootstrap-table-heading

Stripped rows: To make the table appear in alternate dark and light rows, use the combination of classes table and table-stripped 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-stripped within the <table> tag. See the example below for illustration.

Example:

HTML




<!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=
          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-stripped -->
        <table class="table table-striped">
            <thead>
                <tr>
                    <th scope="col">S. No.</th>
                    <th scope="col">Name</th>
                    <th scope="col">City</th>
                    <th scope="col">Age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Ajay</td>
                    <td>Patna</td>
                    <td>20</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Rahul</td>
                    <td>Chandigarh</td>
                    <td>17</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Parush</td>
                    <td>Kolkata</td>
                    <td>22</td>
                </tr>
            </tbody>
        </table>
        <!-- table, table-stripped, table-dark -->
        <table class="table table-striped table-dark">
            <thead>
                <tr>
                    <th scope="col">S. No.</th>
                    <th scope="col">Name</th>
                    <th scope="col">City</th>
                    <th scope="col">Age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Ajay</td>
                    <td>Patna</td>
                    <td>20</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Rahul</td>
                    <td>Chandigarh</td>
                    <td>17</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Parush</td>
                    <td>Kolkata</td>
                    <td>22</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
 
</html>


Output:

bootstrap-table-striped

Bordered table: To make the table and its every 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 every 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:

HTML




<!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=
          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.</th>
                    <th scope="col">Name</th>
                    <th scope="col">City</th>
                    <th scope="col">Age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Ajay</td>
                    <td>Patna</td>
                    <td>20</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Rahul</td>
                    <td>Chandigarh</td>
                    <td>17</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <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.</th>
                    <th scope="col">Name</th>
                    <th scope="col">City</th>
                    <th scope="col">Age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Ajay</td>
                    <td>Patna</td>
                    <td>20</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Rahul</td>
                    <td>Chandigarh</td>
                    <td>17</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Parush</td>
                    <td>Kolkata</td>
                    <td>22</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
 
</html>


Output:

bootstrap-table-bordered

Supported Browser:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


Last Updated : 06 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads