How to use text-wrap class In Bootstrap
Bootstrap provides utility classes that we can use to make text responsive. These classes include text-wrap for preventing text wrapping, text-truncate for truncating long text, and text-break for breaking long words.
Example: This example describes the implementation of making the text responsive using text-wrap 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>
<h1 class="text-center text-success">
Responsive Text
</h1>
<br />
<div class="text-center">
<p class="text-wrap text-danger">
Bootstrap is a widely-used open-source front-end framework
for web development, providing a collection of HTML, CSS, and
JavaScript components and tools that enable developers to build
responsive, mobile-first websites with ease.
<br />
<br />
Bootstrap is a free and open-source tool collection for
creating responsive websites and web applications. It is the
most popular HTML, CSS, and JavaScript framework for developing
responsive, mobile-first websites. Nowadays, the websites are
perfect for all browsers (IE, Firefox, and Chrome) and for
all sizes of screens (Desktop, Tablets, Phablets, and Phones).
<br />
<br />
By using this framework we can easily manipulate the styling
of any web page, like font style, text color, background color,
flex, grid system, etc. Bootstrap Vesrion 4 and Vesrion 5 are
the most popular versions.
</p>
</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