How to use display class In Bootstrap
Bootstrap’s display class is used when you need a responsive heading. These display classes offer a quick way to style headings making them useful for creating visually appealing and hierarchy-aware responsive typography in a Bootstrap-based project.
Example: This example describes the implementation of making the text responsive using display class of Bootstrap.
<!DOCTYPE html>
<html>
<head>
<title>Responsive Text</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet" />
</head>
<body>
<div class="container">
<h1 class="text-center text-success">
w3wiki
</h1>
<div class="container">
<h1 class="display-6 text-center">
Responsive Text Example
</h1>
</div>
</div>
</body>
</html>
Output:
How to make Text Responsive in Bootstrap ?
Making text responsive in Bootstrap involves using responsive typography utilities like .text-sm, .text-md, etc., to ensure text adapts to different screen sizes. This ensures readability and maintains visual hierarchy across devices.
Below are the approaches to making text responsive in Bootstrap:
Table of Content
- Using fs class
- Using display class
- Using text-wrap class
Contact Us