Bootstrap Text
Text is an important element of the webpage. A webpage without text cannot be imagined. Simply adding text to a web page will make the page boring and dull. The text should be added with fonts, size and it should be properly aligned. The text formatting can be easily done with the help of Bootstrap 5 text utility classes. In this tutorial, we will discuss different text utility that is available in Bootstrap 5 along with examples.
Text Alignment
We can easily align the text alignment within the components using the text alignment class. Align the text to start, end, or center using these classes. We can also use responsive classes to align the text depending on the size of the screen.
The text alignment classes used for aligning text:
- .text-start - It places the text to the left on all types of the viewport.
- .text-end - It places the text to the right on all typ4es of the viewport.
- .text-center - It places the text to the center on all types of the viewport
- .text-sm-start - It places the text to the left on small sizes viewports.
- .text-md-end - It places the text to the right on medium size viewport.
Example: Aligning the text using text alignment classes
This is an example of responsive text alignment classes in bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<div class="container bg-light mt-5">
<h2 class="text-center" > Text Alignment </h2>
<p class="text-start"> We have started with aligning the text to the left side </p>
<p class="text-end"> The text can be aligned to right </p>
<p class="text-sm-start"> We can add breakpoints along with text alignment class for responsive alignment</p>
</div>
</body>
</html>
Output
Here is the output of the above program.
Text Wrapping and Overflow
Text wrapping means when the text immediately wraps to the next line. The text can be wrapped using the .text-wrap class. To avoid the text from wrapping use the .text-nowrap class.
Example: Wrapping the text using text wrap classes
Here is an example to show wrapping and overflow of text. The .text-wrap classes wrap the text to the next line whereas the .text-nowrap classes prevent the wrapping of text which leads to text-overflow. The parent classes are set to predefined width to show the wrapping effect.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<button class="btn btn-primary text-wrap m-5" style="width: 10rem;">
This text should wrap.
</button>
<div class="text-nowrap bg-secondary m-5" style="width: 8rem;">
<div class="text-nowrap bg-secondary mx-5" style="width: 8rem;">
This text should overflow the parent.
</div>
</body>
</html>
Output:
Here is the output of the above program.
Text Transform
The text can be changed to uppercase or lowercase using the text capitalization classes. The first letter of the word can be capitalized using the .text-capitalize class.
Example: Transforming the text in components using text capitalization.
The .text-lowercase class is used to change the text to lowercase. To transform the text to uppercase use the .text-uppercase class. And if we just need the first letter to be in uppercase use the .text-capitalization class. Here in this example, we have taken all the three classes to transform the text.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<div class="container center-text">
<p class="text-lowercase"> lowercase text class changes all text to lower </p>
<p class="text-uppercase"> Uppercase text change all text to upper </p>
<p class="text-capitalize"> Capitalized text is used to change case of first letter of word</p>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Font Size
The font size of the text can get changed using the font utility classes. The font-size classes match the size of HTML headings. So when the font value increases the sizes decrease.
Example: Using the font-size classes for text
The available font size utilities are .fs-1 , .fs-2, .fs-3, .fs-4, .fs-5, and .fs-6 . Let's take an example to show usage of font size utilities.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<div class="container center-text">
<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Font weight and italics
We can also change font styles by making the text bold or italic using the font utilities. Bootstrap font-style utilities are used to transform the text to italics whereas font-weight utilities are used to make the text bold.
The font-weight utilities are abbreviated as .fw-* and the font-style utilities are abbreviated as .fst-*
- .fw-bold - It is used to change the text bold.
- .fw-bolder - It is used to bold the text relative to the parent element.
- .fw-normal - It is used for normal weight text.
- .fw-light - It is used for light weight text.
- .fw-lighter = It is used for lighter weight text relative to the parent element.
- .fst-italic - The text font style is changed to italic.
- .fst-normal - Used for a normal styled text.
Example: Adding font weight and font styles to the text
In this example, we have used all the above classes to modify the font style and font weight of the text.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<div class="container center-text">
<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text .</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text.</p>
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Line Height
Line height is basically used for increasing or decreasing spaces between the two lines. Bootstrap uses .h1-* utilities to change the line-height.
Example: Adding line height to the text
The utilities used for adding line-height between two lines are
- .1h-1 is used to add the least space between two lines.
- .1h-sm class is used to add small spaces between two lines.
- .1h-base class is used to add more space between two lines than the above class.
- .1h-lg class is used to add large space between two lines.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<div class="container center-text">
<p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Reset color and Text Decoration
Reset the text or link color using the .text-reset class, so that it inherits the color from the parent element. We can also decorate the text using text-decoration classes.
Example: Adding reset color and text-decoration classes to the text
To reset the color with respect to the parent element using the .text-reset class. The .text-decoration-underline class is used to underline the whole text. The .text-decoration-line-through is used to pass the line through the text. The .text-decoration-none is used to remove any text-decoration from its parent element.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<div class="container center-text">
<p class="text-primary">primary text with a <a href="#" class="text-reset">reset link</a></p>
<p class="text-decoration-underline">This text has has been underlined.</p>
<p class="text-decoration-line-through">A line passes through the text.</p>
<a href="#" class="text-decoration-none">The link has its text decoration removed</a>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Conclusion
In this tutorial, we have learned how to use bootstrap 5 classes to modify the text within a component. From changing the text size, fonts to aligning the text and adding styles to text. This all can be done using bootstrap classes and utilities. It is very easy and quick to style text using Bootstrap.
