Bootstrap provides classes to align text in various directions easily and quickly.
To align text using Bootstrap classes, you can add the following classes to your HTML element:
text-left: this class aligns text to the left.text-center: this class centers text.text-right: this class aligns text to the right.text-justify: this class justifies text.Here is an example of how to align text using Bootstrap classes.
<div class="text-left">Left aligned text.</div>
<div class="text-center">Centered text.</div>
<div class="text-right">Right aligned text.</div>
<div class="text-justify">Justified text.</div>
Prevent long strings of text from breaking your components’ layout by using .text-break to set word-wrap
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
Transform text in components with text capitalization classes.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
Quickly change the font-size of text. While our heading classes (e.g., .h1–.h6)
<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>
Font weight refers to the thickness or darkness of characters in a typeface.
<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-semibold">Semibold weight text.</p>
<p class="fw-medium">Medium 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 (relative to the parent element).</p>
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>
Change the line height with .lh-* utilities.
<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>
Decorate text in components with text decoration classes.
<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>
In the code above, we used the text alignment classes provided by Bootstrap to align text in various directions.
You can use Bootstrap text alignment classes to align text on various elements such as headings, paragraphs, and list items. These classes can help improve the visual appeal of your website and make it more readable.
Bootstrap text alignment classes are a quick and easy way to align text in various directions on your website. By using these classes, you can align text to the left, center, right, or justify it to improve the readability and visual appeal of your website.