How to make HTML table responsive in bootstrap 4

Sometimes, when a table contains many columns, it can overflow horizontally beyond the screen width. To handle this in Bootstrap 4, we can use the .table-responsive class to make the HTML table responsive. Simply wrap the <table> element inside a <div> with the .table-responsive class. This will enable horizontal scrolling on smaller screens, ensuring the layout remains clean and user-friendly without breaking the design. An example is provided below: Responsive table sample code

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Student First Name</th>
        <th>Student Last Name</th>
        <th>Student Email</th>
        <th>Student Class</th>
        <th>Student Grade</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Rama</td>
        <td>Kumar</td>
        <td>rama.kumar@example.com</td>
        <td>4th</td>
        <td>A++</td>
      </tr>
    </tbody>
  </table>
</div>