JavaScript Error

You currently have JavaScript disabled on your web browser.

This website uses JavaScript, and This web page needs JavaScript activated to work correctly.

Please active JavaScript on your web browser and then refresh this web page.



Tables



Bootstrap 5 can offer several enhancements to an otherwise ordinary HTML table. A basic Bootstrap 5 enhanced table gives the table a light padding, horizontal dividers, and preset sizing styles.

Example 1 ~ .table

The .table class is added to a table element to add basic Bootstrap 5 styling:

 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Color Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <table class="table">
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>JD@home.net</td>
      </tr>
      <tr>
        <td>Bugs</td>
        <td>Bunny</td>
        <td>Bugs@example.com</td>
      </tr>
      <tr>
        <td>Bruce</td>
        <td>Wayne</td>
        <td>Batman@justiceleague.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Example 1 : Demo

First Name Last Name Email
John Doe JD@home.net
Bugs Bunny Bugs@example.com
Bruce Wayne Batman@justiceleague.com




Example 2 ~ .table-striped

The .table-striped class adds zebra-stripes to a table, meaning that the background color of the table rows alternate between light and dark:

 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Color Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <table class="table table-striped">
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>JD@home.net</td>
      </tr>
      <tr>
        <td>Bugs</td>
        <td>Bunny</td>
        <td>Bugs@example.com</td>
      </tr>
      <tr>
        <td>Bruce</td>
        <td>Wayne</td>
        <td>Batman@justiceleague.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Example 2 : Demo

First Name Last Name Email
John Doe JD@home.net
Bugs Bunny Bugs@example.com
Bruce Wayne Batman@justiceleague.com




Example 3 ~ .table-bordered

The .table-bordered class adds thin visible borders (horizontal and vertical) on all sides of the table and cells:

 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Color Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>JD@home.net</td>
      </tr>
      <tr>
        <td>Bugs</td>
        <td>Bunny</td>
        <td>Bugs@example.com</td>
      </tr>
      <tr>
        <td>Bruce</td>
        <td>Wayne</td>
        <td>Batman@justiceleague.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Example 3 : Demo

First Name Last Name Email
John Doe JD@home.net
Bugs Bunny Bugs@example.com
Bruce Wayne Batman@justiceleague.com




Example 4 ~ .table-hover

The .table-hover class adds a hover effect to the table rows, so that if someone moves their mouse pointer over a table row then it will highlight itself by temporarily changing that table rows background color to grey:

 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Color Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <table class="table table-hover">
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>JD@home.net</td>
      </tr>
      <tr>
        <td>Bugs</td>
        <td>Bunny</td>
        <td>Bugs@example.com</td>
      </tr>
      <tr>
        <td>Bruce</td>
        <td>Wayne</td>
        <td>Batman@justiceleague.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Example 4 : Demo

First Name Last Name Email
John Doe JD@home.net
Bugs Bunny Bugs@example.com
Bruce Wayne Batman@justiceleague.com




Example 5 ~ .table-dark

The .table-dark class adds a black background to the table and changes the text color to white:

 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Color Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <table class="table table-dark">
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>JD@home.net</td>
      </tr>
      <tr>
        <td>Bugs</td>
        <td>Bunny</td>
        <td>Bugs@example.com</td>
      </tr>
      <tr>
        <td>Bruce</td>
        <td>Wayne</td>
        <td>Batman@justiceleague.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Example 5 : Demo

First Name Last Name Email
John Doe JD@home.net
Bugs Bunny Bugs@example.com
Bruce Wayne Batman@justiceleague.com




Example 6 ~ .table-borderless

The .table-borderless class removes all visible borders from the table and cells:

 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Color Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <table class="table table-borderless">
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>JD@home.net</td>
      </tr>
      <tr>
        <td>Bugs</td>
        <td>Bunny</td>
        <td>Bugs@example.com</td>
      </tr>
      <tr>
        <td>Bruce</td>
        <td>Wayne</td>
        <td>Batman@justiceleague.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Example 6 : Demo

First Name Last Name Email
John Doe JD@home.net
Bugs Bunny Bugs@example.com
Bruce Wayne Batman@justiceleague.com




Example 7 ~ Contextual Colors

The Contextual Colors classes can be used to color the entire table (<table>), the table rows (<tr>), or the table cells (<td>):

 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Color Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <table class="table">
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>JD@home.net</td>
      </tr>
      <tr class="table-primary">
        <td>Bugs</td>
        <td>Bunny</td>
        <td>Bugs@example.com</td>
      </tr>
      <tr class="table-success">
        <td>Bruce</td>
        <td>Wayne</td>
        <td>Batman@justiceleague.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Example 7 : Demo

First Name Last Name Email
John Doe JD@home.net
Bugs Bunny Bugs@example.com
Bruce Wayne Batman@justiceleague.com




Example 8 ~ .table-responsive

The .table-responsive class adds scrollbars to the table when needed, so that larger tables fit the page instead of the page size being changed to include the table. However, unlike the other table classes, the .table-responsive class is added to a <div> element which is then wrapped around a table element:

 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Color Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <div class="table-responsive">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Email</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Doe</td>
          <td>JD@home.net</td>
          <td>Yes</td>
          <td>No</td>
          <td>Yes</td>
          <td>No</td>
          <td>Yes</td>
          <td>No</td>
          <td>Yes</td>
          <td>No</td>
          <td>Yes</td>
          <td>No</td>
          <td>Yes</td>
          <td>No</td>
          <td>Yes</td>
          <td>No</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>Bugs</td>
          <td>Bunny</td>
          <td>Bugs@example.com</td>
          <td>Yes</td>
          <td>No</td>
          <td>Yes</td>
          <td>No</td>
          <td>Yes</td>
          <td>No</td>
          <td>Yes</td>
          <td>No</td>
          <td>Yes</td>
          <td>No</td>
          <td>Yes</td>
          <td>No</td>
          <td>Yes</td>
          <td>No</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>Bruce</td>
          <td>Wayne</td>
          <td>Batman@justiceleague.com</td>
          <td>Yes</td>
          <td>No</td>
          <td>Yes</td>
          <td>No</td>
          <td>Yes</td>
          <td>No</td>
          <td>Yes</td>
          <td>No</td>
          <td>Yes</td>
          <td>No</td>
          <td>Yes</td>
          <td>No</td>
          <td>Yes</td>
          <td>No</td>
          <td>Yes</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

</body>
</html>

Example 8 : Demo

First Name Last Name Email Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example
John Doe JD@home.net Yes No Yes No Yes No Yes No Yes No Yes No Yes No Yes
Bugs Bunny Bugs@example.com Yes No Yes No Yes No Yes No Yes No Yes No Yes No Yes
Bruce Wayne Batman@justiceleague.com Yes No Yes No Yes No Yes No Yes No Yes No Yes No Yes

Final Thoughts

What is even more helpful is that multiple table classes can be used at the same time on the same table.

Thank you for reading, I hope you found this blog post (tutorial) educational and helpful.


(0) pollYesResult
(0) pollNoResult



 
     About   |   Contact Us   |   Privacy   |   Terms & Conditions   |   © 2024 - T&J Divisions, LLC, All Rights Reserved