Bootstrap Text Utilities Tutorial with Examples

View more Tutorials:

Follow us on our fanpages to receive notifications every time there are new articles. Facebook Twitter

1- Text Alignment  


<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.'

<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

<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)

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.

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

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

<div class="text-nowrap border border-danger">
   Bootstrap is a free and open-source front-end framework.
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}.

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

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

3- Text transform 

Bootstrap provides some classes to transform a text.
.text-lowercaseTransforms a text into lowercase.
.text-uppercaseTransforms a text into uppercase.
.text-capitalizeAll the first characters of each letter will be uppercase, while other characters will not change.

<h4 class="mb-3">Origin Text:</h4>
<p>bootSTrap teXt</p>
<p class="text-lowercase">bootSTrap teXt</p>
<p class="text-uppercase">bootSTrap teXt</p>
<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;
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

<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:

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

View more Tutorials: