Bootstrap 5 Reboot Tables

Bootstrap 5 Reboot Tables are designed to style captions, borders, alignment, and much more. Many more styles are provided by Bootstrap 5 Reboot Tables like padding / accented tables etc.

Bootstrap 5 Reboot Tables Used Classes: There are no special classes for BootStrap 5 Reboot Tables. The classes of Bootstrap 5 tables will be used.

Bootstrap 5 Reboot Tables Used Attribute:

<caption>: This attribute is used for writing the caption of the table. This appears in text-muted color

Syntax:

<table class="table">
    <caption>
        ...
    </caption>
    ...
</table>

Example 1: In this example, we will how to provide caption /text alignment and collapse borders in the Reboot Tables

HTML

<!DOCTYPE html>
<html>
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
      <title>BootStrap5 Reboot Tables</title>
</head>

<body class="m-3 col-6">
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    <h2>BootStrap5 Reboot Tables</h2>

    <table class="table">
        <caption>
              Road to Web-Developer Part 1 - Caption by Reboot Tables
          </caption>
        <thead>
            <tr>
                <th scope="col">No</th>
                <th scope="col">Course</th>
                <th scope="col">Practice</th>
                <th scope="col">Exercise</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>HTML- Basics</td>
                <td>Tag usage</td>
                <td>Create a Form</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>CSS- Basics</td>
                <td>Properties usage</td>
                <td>Design a Form</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Output:

Example 2: In this example, we will learn about .table class with hover and border styling

HTML

<!DOCTYPE html>
<html>
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
      <title>BootStrap5 Reboot Tables</title>
</head>

<body class="m-3 col-6">
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    <h2>BootStrap5 Reboot Tables</h2>

    <table class="table table-hover table-bordered">
        <caption>
              Road to Web-Developer Part 1 - Caption by Reboot Tables
          </caption>
        <thead>
            <tr>
                <th scope="col">No</th>
                <th scope="col">Course</th>
                <th scope="col">Practice</th>
                <th scope="col">Exercise</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>HTML- Basics</td>
                <td>Tag usage</td>
                <td>Create a Form</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>CSS- Basics</td>
                <td>Properties usage</td>
                <td>Design a Form</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Output

Reference: https://getbootstrap.com/docs/5.0/content/reboot/#tables

Bootstrap 5 Reboot Tables

Explore