Skip to content
Related Articles

Related Articles

Bootstrap | Tables | Set-1

Improve Article
Save Article
  • Last Updated : 27 Apr, 2022
Improve Article
Save Article

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.</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>

Output:

bootstrap-table-simple

Dark table: To make the table appear in the 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.</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>

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.</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>

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-stripped">
            <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-stripped, table-dark -->
        <table class="table table-stripped 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>

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.</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>

Output:

bootstrap-table-bordered

Supported Browser:

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

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!