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.
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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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
Similar Reads
How to change font style on element using Bootstrap 5? Bootstrap enables changing font styles by applying predefined classes like .fw-bold for bold, .fst-italic for italic, etc., directly to HTML elements. This ensures consistent and responsive typography across web applications without needing custom CSS. There are a few Bootstrap Built-in Classes for
2 min read
How to change the Width of a Column in Bootstrap Table ? In Bootstrap, the table is an important component used for organizing and displaying data in rows and columns. Below are the approaches to change the width of a column in the Bootstrap table: Table of Content Using Bootstrap Grid ClassesUsing width AttributeUsing Bootstrap Grid ClassesIn this approa
2 min read
How to Create a Responsive Table in Bootstrap ? A responsive table in Bootstrap adjusts its layout to fit different screen sizes, ensuring readability and usability on all devices. It typically involves using classes like .table-responsive or custom CSS to enable horizontal scrolling on smaller screens.Table of Content Using the table-responsive
4 min read
How to create Hoverable Table Rows in Bootstrap 5 ? This feature is particularly useful in web applications, dashboards, or scenarios where tabular data is presented, improving the overall user experience and interface. To achieve the effect of hoverable table rows we use the bootstrap class "table-hover" in the <table> tag. This effect enhance
2 min read
How to create a rounded table in Bootstrap 5? Bootstrap 5 provides various classes that can be used for styling the tables such as changing the heading appearance, making the rows striped, adding or removing borders, making rows hoverable, etc. In this article, we will learn How to create a rounded table in Bootstrap 5. Here we use two differen
2 min read
How to create a rounded table in Bootstrap 5? Bootstrap 5 provides various classes that can be used for styling the tables such as changing the heading appearance, making the rows striped, adding or removing borders, making rows hoverable, etc. In this article, we will learn How to create a rounded table in Bootstrap 5. Here we use two differen
2 min read