How to make table responsive in bootstrap 5?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

In this tutorial, we will learn how to make table responsive in bootstrap 5.

To make table responsive, put .table table-responsive class to create table responsive in bootstrap 5.

Use .table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

Table of contents

  • Includes bootstrap 5 view
  • Includes bootstrap 5 library
  • Define its class name

Step 1: Includes bootstrap 5 view

To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

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

Step 2: Includes bootstrap 5 library

First of all, load the bootstrap 5 framework CSS into the head tag of your webpage.

<!-- bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Step 3: Define its class name

After that, create make table responsive with a class name .table.

<div class="m-4">
    <h1 class="text-center">Bootstrap Table Responsive</h1>
    
        <table class="table table-bordered table-responsive">
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Rohan</td>
                    <td>Tiwari</td>
                    <td>[email protected]</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Sohan</td>
                    <td>Pal</td>
                    <td>[email protected]</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Rajesh</td>
                    <td>Gupta</td>
                    <td>[email protected]</td>
                </tr>
            </tbody>
        </table>
    </div> 

Example.

Let’s look at the following example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Responsive Table</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
    /* Custom style to make this example easy to understand */
    table * {
        text-align: center;
    }
</style>
</head>
<body>
<div class="m-4">
    <h1 class="text-center">Bootstrap Table Responsive</h1>
    
        <table class="table table-bordered table-responsive">
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Rohan</td>
                    <td>Tiwari</td>
                    <td>[email protected]</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Sohan</td>
                    <td>Pal</td>
                    <td>[email protected]</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Rajesh</td>
                    <td>Gupta</td>
                    <td>[email protected]</td>
                </tr>
            </tbody>
        </table>
    </div> 

</body>
</html>

Check the output of the above code example.

when window size is > 576px :

Bootstrap, Table, Responsive

When window size is less than < 576px :

Bootstrap, Table, Responsive

All the best 👍