How to use Bootstrap 5 Responsive Table?

by Thamimul Ansari Bootstrap

bootsrap 5 providing lots of classes for making responsive table.

Example:
<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Responsive Table Example</title>

    <!-- Include Bootstrap CSS -->

    <link

      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"

      rel="stylesheet"

    />

  </head>

  <body>

    <div class="container mt-4">

      <h2>Responsive Table Example</h2>

      <div class="table-responsive">

        <table class="table table-bordered">

          <thead>

            <tr>

              <th>#</th>

              <th>First Name</th>

              <th>Last Name</th>

              <th>Email</th>

              <th>Phone</th>

            </tr>

          </thead>

          <tbody>

            <tr>

              <td>1</td>

              <td>John</td>

              <td>Doe</td>

              <td>john@example.com</td>

              <td>555-1234</td>

            </tr>

            <tr>

              <td>2</td>

              <td>Jane</td>

              <td>Smith</td>

              <td>jane@example.com</td>

              <td>555-5678</td>

            </tr>

            <!-- Add more rows as needed -->

          </tbody>

        </table>

      </div>

    </div>

    <!-- Include Bootstrap JS (optional) -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

  </body>

</html>