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
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.
<!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:
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.
<!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:
