How to change font size of Table Content in Bootstrap 5?

Last Updated : 19 Feb, 2024

Bootstrap 5 has simple and flexible framework features to build responsive web applications. For changing the font size of table content, we can use Utility Classes or the Typography Class which allows us to adjust the font sizes according to the requirement. In this article, we will explore both approaches to changing the font size of the table.

Table of Content

Using fs Utility Classes
Using Typography Classes

Using fs Utility Classes

This approach uses the Bootstrap 5 Utility Classes assigned to Table Rows. The classes like fs-1, fs-2, etc., are applied to the respective table rows or cells. For example, use class=”fs-1″ for the smallest font size and class=”fs-9″ for the largest.

Syntax

<tr class="fs-1">
        <th scope="row">Data</th>
        <td>Data</td>
        <td>Data</td>
</tr>

Example: This example describes the utility class to change the font size of table content in Bootstrap 5.

HTML

<!DOCTYPE html>
<html>
   
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
          rel="stylesheet">
    <title>Utility Classes fs</title>
</head>
 
<body>
 
    <div class="container mt-5">
        <h1 class="text-success text-center">
          GeeksforGeeks
          </h1>
        <h3 class="text-primary text-center">
          Using fs Utility Classes
          </h3>
 
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">S.No.</th>
                    <th scope="col">Topic</th>
                    <th scope="col">Description</th>
                </tr>
            </thead>
            <tbody>
                <tr class="fs-8">
                    <th scope="row">1</th>
                    <td>MERN</td>
                    <td>MongoDB NodeJS ReactJS ExpressJS</td>
                </tr>
                <tr class="fs-3">
                    <th scope="row">2</th>
                    <td>HTML</td>
                    <td>Hypertext Markup Language</td>
                </tr>
                <tr class="fs-4">
                    <th scope="row">3</th>
                    <td>CSS</td>
                    <td>Cascading Style Sheets</td>
                </tr>
                <tr class="fs-9">
                    <th scope="row">4</th>
                    <td>JavaScript</td>
                    <td>Programming language of the web</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">
      </script>
</body>
 
</html>

Output:

Output

Using Typography Classes

This approach uses the Typography Classes of Bootstrap 5 to select a font size from the dropdown menu and the JavaScript function dynamically updates the font size specified to table cells according to the selected heading by the user.

Syntax

 <td id="topic1" class="h1">Data</td>

Example: This example describes the typography class to change the font size of table content in Bootstrap 5.

HTML

<!DOCTYPE html>
<html>
   
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
          rel="stylesheet">
    <title>Typography Classes</title>
</head>
 
<body>
    <div class="container mt-5">
        <h1 class="text-success text-center">
              GeeksforGeeks
          </h1>
        <h3 class="text-primary text-center">
              Using Typography Classes
          </h3>
        <div class="mb-3">
            <label for="fontSizeSelect" class="form-label">
                  Select Font Size:
              </label>
            <select class="form-select" id="fontSizeSelect"
                    onchange="changeFontSize()">
                <option value="h1">H1</option>
                <option value="h2">H2</option>
                <option value="h3">H3</option>
                <option value="h4">H4</option>
                <option value="h5">H5</option>
                <option value="h6">H6</option>
            </select>
        </div>
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">S.No.</th>
                    <th scope="col">Topic</th>
                    <th scope="col">Description</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td id="topic1" class="h1">MERN</td>
                    <td id="desc1" class="h2">
                      MongoDB ExpressJS ReactJS NodeJS
                      </td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td id="topic2" class="h5">HTML</td>
                    <td id="desc2" class="h6">Hypertext Markup Language</td>
                </tr>
            </tbody>
 
        </table>
    </div>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">
      </script>
    <script>
        function changeFontSize() {
            var fontSize = document.getElementById("fontSizeSelect").value;
            document.getElementById("topic1").className = fontSize;
            document.getElementById("desc1").className = fontSize;
            document.getElementById("topic2").className = fontSize;
            document.getElementById("desc2").className = fontSize;
        }
    </script>
</body>
 
</html>

Output:

Output

Suggest improvement

How to change the size of Form controls in Bootstrap ?

Share your thoughts in the comments

How to change font size of Table Content in Bootstrap 5?

Using fs Utility Classes

Syntax

HTML

Using Typography Classes

Syntax

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?