Open In App

Bootstrap | Tables | Set-2

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
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 striped, adding or removing borders, and 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:

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


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 tables hoverable using the combination of classes table, table-hover, and table-dark 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-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>


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:

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


Output:

bootstrap-table-small

Colored table: Bootstrap provides us with a number of contextual classes that can be used to color the entire row or a single cell of the table. These classes should be used with a light table and not with a dark table for a 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

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


Output:

bootstrap-table-colored

Responsive tables: To make the table responsive on all viewport sizes, wrap the table within an opening and closing <div> tags, having class table-responsive within the opening <div> tag. Similarly, to make the table responsive depending on 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 the current size. 

In the case of viewport specific responsive table, the 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

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


Output:

bootstrap-table-responsive

Example 2: table-responsive-md

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


Output:

bootstrap-table-responsive-md

Supported Browser:

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


Last Updated : 27 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads