Bootstrap Text Utilities Tutorial with Examples

Text Alignment
Text wrapping & overflow
Text transform
Font weight & italic
Monospaced Font

1. Text Alignment

text-justify-example

<h4>.text-justify</h4>
<p class="text-justify">
   In my younger and more vulnerable years my father gave me some advice that
   I've been turning over in my mind ever since.
   'Whenever you feel like criticizing anyone,' he told me,
   'just remember that all the people in this world haven't had the advantages that you've had.'
</p>

text-alignment-example

<h4 class="mb-3">Text Alignment</h4>

<p class="text-left">(.text-left) Left aligned text.</p>
<p class="text-center">(.text-center) Center aligned text.</p>
<p class="text-right">(.text-right) Right aligned text.</p>

Other classes can be used in the "Responsive" situation:

text-left
text-center
text-right
text-sm-left
text-sm-center
text-sm-right
text-md-left
text-md-center
text-md-right
text-lg-left
text-lg-center
text-lg-right
text-xl-left
text-xl-center
text-xl-right

text-alignment-responsive-example

<h4 class="mb-3">Text Alignment</h4>

<p class="text-left text-sm-center text-md-right">
   (.text-left .text-sm-center .text-md-right)
</p>

2. Text wrapping & overflow

Wrapping is the phenomenon which part of text content is pushed down to lower lines if the length of the text is greater than the width of the parent element.

text-wrapping-example

<h4>Text Wrapping</h4>
<div class="border border-danger">
  Bootstrap is a free and open-source front-end framework.
</div>

Apply the .text-nowrap class to the parent element to remove the wrapping phenomenon, but you will see the overflow of text from the parent element.

text-nowrap-example

<h4 class="mb-4">.text-nowrap</h4>

<div class="text-nowrap border border-danger">
   Bootstrap is a free and open-source front-end framework.
</div>

To avoid the text overflow from the parent element, you can use the .text-truncate class to apply to the parent element, the overflown content is hidden and three dots (...) appear at the end of the text.

The .text-truncate class applies to only the elements set up {display:block} or {display:inline-block}. Note: the default <div>,<p> is set up {display:block}.

text-truncate-example

<h4 class="mb-4">.text-truncate</h4>

<div class="text-truncate border border-danger">
   Bootstrap is a free and open-source front-end framework.
</div>

3. Text transform

Bootstrap provides some classes to transform a text.

Class	Description
.text-lowercase	Transforms a text into lowercase.
.text-uppercase	Transforms a text into uppercase.
.text-capitalize	All the first characters of each letter will be uppercase, while other characters will not change.

text-transform-example

<h4 class="mb-3">Origin Text:</h4>
<p>bootSTrap teXt</p>
<hr>
<h5>.text-lowercase</h5>
<p class="text-lowercase">bootSTrap teXt</p>
<h5>.text-uppercase</h5>
<p class="text-uppercase">bootSTrap teXt</p>
<h5>.text-capitalize</h5>
<p class="text-capitalize">bootSTrap teXt</p>

4. Font weight & italic

To establish weight and italic style for a text in the CSS, you use the following ways:

font-weight: normal;
font-weight: bold;
font-weight: bolder;
font-weight: lighter;

font-style: normal;
font-style: italic;
font-style:oblique;

Instead of the above Css properties, you can use the built-in classes of the Bootstrap:

.font-weight-bold
.font-weight-normal
.font-weight-light
.font-italic

font-weight-italic-example

<h4 class="mb-3">Font weight, italic</h4>

<p class="font-weight-bold">(.font-weight-bold) Bold text.</p>
<p class="font-weight-normal">(.font-weight-normal) Normal weight text.</p>
<p class="font-weight-light">(.font-weight-light) Light weight text.</p>
<p class="font-italic">(.font-italic) Italic text.</p>

5. Monospaced Font

Monospaced Font: the font that each character has the same horizontal length. It looks like the following illustration:

Use Monospace Font with CSS:

font-family: monospace;

Use Monospace Font with Bootstrap:

text-monospace-example.html

<div style="font-size:32px;">Default Font</div>
<div class="text-monospace" style="font-size:32px;">Monospace Font</div>