Bootstrap 4 | Tables

Last Updated : 31 May, 2019

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

Simple Table: The .table class is used to create simple Bootstrap table. This class name is used with <table> tag to create table.

Syntax:

<table class="table"> Table Contents... <table>

Example:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Tables</title> 
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
      
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
      
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
      
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head> 
  
<body> 
    <div class="container"> 
      
        <h1 style="text-align:center;color:green;">
            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:

Striped rows: The .table-striped class is used to create alternate dark and light rows. Use the combination of table and table-striped classes within the <table> tag to create striped table.

Syntax:

<table class="table table-striped"> Table Contents... <table>

Example:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Tables</title> 
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
      
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
      
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
      
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head> 
  
<body> 
    <div class="container"> 
      
        <h1 style="text-align:center;color:green;">
            GeeksforGeeks
        </h1> 
      
        <!-- Bootstrap table and table-striped classes -->
        <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> 
    </div> 
</body> 
  
</html> 

Output:

Bordered Table: The .table-bordered class is used to add border on all side of table and cell. Use the combination of table and table-bordered classes within the <table> tag to create bordered table.

Syntax:

<table class="table table-bordered"> Table Contents... <table>

Example:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Tables</title> 
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
      
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
      
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
      
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head> 
  
<body> 
    <div class="container"> 
      
        <h1 style="text-align:center;color:green;">
            GeeksforGeeks
        </h1> 
      
        <!-- Bootstrap table and table-bordered classes -->
        <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> 
    </div> 
</body> 
  
</html> 

Output:

Hover Rows Table: The .table-hover class is used to add hover effect (change background color to gray when the mouse moves over) on table rows. Use the combination of table and table-hover classes within the <table> tag to create hover rows table.

Syntax:

<table class="table table-hover"> Table Contents... <table>

Example:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Tables</title> 
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
      
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
      
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
      
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head> 
  
<body> 
    <div class="container"> 
      
        <h1 style="text-align:center;color:green;">
            GeeksforGeeks
        </h1> 
      
        <!-- Bootstrap table and table-hover classes -->
        <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> 
    </div> 
</body> 
  
</html>                    

Output:

Black/Dark Table: The .table-dark class is used to add the black background color of a table. Use the combination of table and table-dark classes within the <table> tag to create dark table.

Syntax:

<table class="table table-dark"> Table Contents... <table>

Example:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Tables</title> 
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
      
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
      
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
      
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head> 
  
<body> 
    <div class="container"> 
      
        <h1 style="text-align:center;color:green;">
            GeeksforGeeks
        </h1> 
      
        <!-- Bootstrap table and table-dark classes -->
        <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:

Dark Striped Table: The .table-dark and .table-striped classes are used to create dark stried table. Use the combination of table, table-dark and table-striped classes within the <table> tag to create the dark striped table.

Syntax:

<table class="table table-dark table-striped"> Table Contents... <table>

Example:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Tables</title> 
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
      
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
      
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
      
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head> 
  
<body> 
    <div class="container"> 
      
        <h1 style="text-align:center;color:green;">
            GeeksforGeeks
        </h1> 
      
        <!-- Bootstrap table and table-dark and table-striped classes -->
        <table class="table table-dark 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> 
    </div> 
</body> 
  
</html>                    

Output:

Dark Hoverable Table: The .table-dark and .table-hover classes are used to add hover effect (change background color to dark gray when the mouse moves over) on table rows. Use the combination of table, table-dark and table-hover classes within the <table> tag to create the dark hover effect table.

Syntax:

<table class="table table-dark table-hover"> Table Contents... <table>

Example:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Tables</title> 
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
      
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
      
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
      
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head> 
  
<body> 
    <div class="container"> 
      
        <h1 style="text-align:center;color:green;">
            GeeksforGeeks
        </h1> 
      
        <!-- Bootstrap table, table-dark and table-hover classes -->
        <table class="table table-dark 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> 
    </div> 
</body> 
  
</html>                    

Output:

Borderless Table: The .table-borderless is used to remove the border from table. Use the combination of table and table-borderless classes within the <table> tag to create borderless table.

Syntax:

<table class="table table-borderless"> Table Contents... <table>

Example:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Tables</title> 
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
      
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
      
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
      
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head> 
  
<body> 
    <div class="container"> 
      
        <h1 style="text-align:center;color:green;">
            GeeksforGeeks
        </h1> 
      
        <!-- Bootstrap table, table-borderless classes -->
        <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> 
    </div> 
</body> 
  
</html>                    

Output:

Colored table: Bootstrap provides a number of contextual classes that can be used to color the entire row or a single cell of a table. These classes should be used with the light table and not with the dark table for better appearance. The list of contextual classes is given below.

table-primary	table-secondary	table-success
table-danger	table-warning	table-info
table-light	table-dark	table-active

Example:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Tables</title> 
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
      
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
      
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
      
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head> 
  
<body> 
    <div class="container"> 
      
        <h1 style="text-align:center;color:green;">
            GeeksforGeeks
        </h1> 
      
        <!-- Bootstrap table class -->
        <table class="table"> 
            <thead> 
                <tr class="table-primary"> 
                    <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-secondary"> 
                    <th scope="row">1</td> 
                    <td>Ajay</td> 
                    <td>Patna</td> 
                    <td>20</td> 
                </tr> 
                <tr class="table-success"> 
                    <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> 
    </div> 
</body> 
  
</html>                    

Output:

Dark Colored Table: To color the dark tables, background color classes of Bootstrap will use.

Example:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Tables</title> 
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
      
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
      
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
      
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head> 
  
<body> 
    <div class="container"> 
      
        <h1 style="text-align:center;color:green;">
            GeeksforGeeks
        </h1> 
      
        <!-- Bootstrap table and table-dark classes -->
        <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-secondary"> 
                    <th scope="row">1</td> 
                    <td>Ajay</td> 
                    <td>Patna</td> 
                    <td>20</td> 
                </tr> 
                <tr class="bg-success"> 
                    <th scope="row">2</td> 
                    <td>Rahul</td> 
                    <td>Chandigarh</td> 
                    <td>17</td> 
                </tr> 
                <tr class="bg-danger"> 
                    <th scope="row">3</td> 
                    <td>Parush</td> 
                    <td>Kolkata</td> 
                    <td>22</td> 
                </tr> 
            </tbody> 
        </table> 
    </div> 
</body> 
  
</html>                    

Output:

Small Table: The .table-sm class is used to create small table by reducing the cell padding. Use the combination of table, table-bordered and table-sm classes within the <table> tag to create a bordered small table.

Syntax:

<table class="table table-bordered table-sm"> Table Contents... <table>

Example:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Tables</title> 
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
      
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
      
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
      
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head> 
  
<body> 
    <div class="container"> 
      
        <h1 style="text-align:center;color:green;">
            GeeksforGeeks
        </h1> 
      
        <!-- Bootstrap table, table-bordered and table-sm classes -->
        <table class="table table-bordered 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> 
    </div> 
</body> 
  
</html>                    

Output:

Responsive Tables: The .table-responsive class is used to create responsive table. To make the table responsive on all viewport size, 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 upon the viewport size, use class table-responsive{-sm|-md|-lg|-xl}.

In 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}. The list of responsive table viewports size are given below:

Responsive Table Class Screen Width

table-responsive-sm < 576px

table-responsive-md < 768px

table-responsive-lg < 992px

table-responsive-xl

< 1200px

Syntax:

<div class="table-responsive"> Table <div>

Example:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Tables</title> 
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
      
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
      
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
      
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head> 
  
<body> 
    <div class="container"> 
      
        <h1 style="text-align:center;color:green;">
            GeeksforGeeks
        </h1> 
      
        <!-- Bootstrap table-responsive class -->
        <div class="table-responsive-xl"> 
          
            <!-- Bootstrap table class -->
            <table class="table"> 
                <thead> 
                    <tr> 
                        <th scope="col">S. No.</td> 
                        <th scope="col">First Name</td> 
                        <th scope="col">Last Name</td> 
                        <th scope="col">Email</td> 
                        <th scope="col">Contect No.</td> 
                        <th scope="col">Gender</td> 
                        <th scope="col">City</td> 
                        <th scope="col">Country</td> 
                        <th scope="col">Pin Code</td> 
                    </tr> 
                </thead> 
                  
                <tbody> 
                    <tr> 
                        <td>1</td> 
                        <td>Ajit</td> 
                        <td>Singh</td> 
                        <td>ajt@gfg.com</td> 
                        <td>XXXXXXXXXX</td> 
                        <td>Male</td> 
                        <td>Noida</td> 
                        <td>India</td> 
                        <td>201301</td> 
                    </tr> 
                </tbody> 
            </table> 
        </div> 
    </div> 
</body> 
  
</html>                    

Output:

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes

Bootstrap 4 | Colors

Bootstrap 4 | Images

Related Articles