Text Utilities

These are the basics to keep in mind while developing custom components or interfaces.

Text Alignment

Easily realign text to components with text alignment classes.

Column sizes and their responsive variants:

  • .text-justify
  • .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

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

Left aligned text on viewports sized SM (small) or wider.

Left aligned text on viewports sized MD (medium) or wider.

Left aligned text on viewports sized LG (large) or wider.

Left aligned text on viewports sized XL (extra-large) or wider.


<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-right">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-right">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-right">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-right">Left aligned text on viewports sized XL (extra-large) or wider.</p>

Text Wrapping and Overflow

Wrap text with a .text-wrap class.

This text should wrap.

Prevent text from wrapping with a .text-nowrap class.

This text should overflow the parent.

For longer content, you can add a .text-truncate class to truncate the text with an ellipsis. Requires display: inline-block or display: block.

Praeterea iter est quasdam res quas ex communi.
Praeterea iter est quasdam res quas ex communi.

Prevent long strings of text from breaking your components’ layout by using .text-break to set overflow-wrap: break-word (and word-break: break-word for IE & Edge compatibility).

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

Text Transform

Transform text in components with text capitalization classes.

.text-lowercase - Lowercased text.

.text-uppercase - Uppercased text.

.text-capitalize - capitalized text.


<span class="text-lowercase">Lowercased text.</span>
<span class="text-uppercase">Uppercased text.</span>
<span class="text-capitalize">capitalized text.</span>

Font weight and italics

Quickly change the weight (boldness) of text or italicize text.

.font-weight-bold - Bold text.

.font-weight-bolder - Bolder weight text (relative to the parent element).

.font-weight-normal - Normal weight text.

.font-weight-light - Light weight text.

.font-weight-lighter - Lighter weight text (relative to the parent element).

.font-italic - Italic text.


<span class="font-weight-bold">Bold text.</span>
<span class="font-weight-bolder">Bolder text.</span>
<span class="font-weight-normal">Normal weight text.</span>
<span class="font-weight-light">Light weight text.</span>
<span class="font-weight-lighter">Lighter weight text.</span>
<span class="font-italic">Italic text.</span>

Monospace

Change a selection to our monospace font stack with .text-monospace.

This is in monospace


<span> class="text-monospace">This is in monospace</span>

Reset color

Reset a text or link’s color with .text-reset, so that it inherits the color from its parent.

Muted text without a reset link.

Muted text with a reset link. 


<p class="text-muted">
	Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

Text decoration

Remove a text decoration with a .text-decoration-none class.

Non-underlined link


<a href="#" class="text-decoration-none">Non-underlined link</a>

Bootstrap basic colors

Contextual text classes also work well on anchors with the provided hover and focus states. Note that the .text-white and .text-muted class has no additional link styling beyond underline.

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

Primary link

Secondary link

Success link

Danger link

Warning link

Info link

Light link

Dark link

Muted link

White link

Text color

Available are color classes for text containing all colors from Material Design color pallette

.red-text .text-lighter-5
.red-text .text-lighter-4
.red-text .text-lighter-3
.red-text .text-lighter-2
.red-text .text-lighter-1
.red-text
.red-text .text-darker-1
.red-text .text-darker-2
.red-text .text-darker-3
.red-text .text-darker-4
.red-text .text-alt-1
.red-text .text-alt-2
.red-text .text-alt-3
.red-text .text-alt-4
.pink-text .text-lighter-5
.pink-text .text-lighter-4
.pink-text .text-lighter-3
.pink-text .text-lighter-2
.pink-text .text-lighter-1
.pink-text
.pink-text .text-darker-1
.pink-text .text-darker-2
.pink-text .text-darker-3
.pink-text .text-darker-4
.pink-text .text-alt-1
.pink-text .text-alt-2
.pink-text .text-alt-3
.pink-text .text-alt-4
.purple-text .text-lighter-5
.purple-text .text-lighter-4
.purple-text .text-lighter-3
.purple-text .text-lighter-2
.purple-text .text-lighter-1
.purple-text
.purple-text .text-darker-1
.purple-text .text-darker-2
.purple-text .text-darker-3
.purple-text .text-darker-4
.purple-text .text-alt-1
.purple-text .text-alt-2
.purple-text .text-alt-3
.purple-text .text-alt-4
.deep-purple-text .text-lighter-5
.deep-purple-text .text-lighter-4
.deep-purple-text .text-lighter-3
.deep-purple-text .text-lighter-2
.deep-purple-text .text-lighter-1
.deep-purple-text
.deep-purple-text .text-darker-1
.deep-purple-text .text-darker-2
.deep-purple-text .text-darker-3
.deep-purple-text .text-darker-4
.deep-purple-text .text-alt-1
.deep-purple-text .text-alt-2
.deep-purple-text .text-alt-3
.deep-purple-text .text-alt-4
.indigo-text .text-lighter-5
.indigo-text .text-lighter-4
.indigo-text .text-lighter-3
.indigo-text .text-lighter-2
.indigo-text .text-lighter-1
.indigo-text
.indigo-text .text-darker-1
.indigo-text .text-darker-2
.indigo-text .text-darker-3
.indigo-text .text-darker-4
.indigo-text .text-alt-1
.indigo-text .text-alt-2
.indigo-text .text-alt-3
.indigo-text .text-alt-4
.blue-text .text-lighter-5
.blue-text .text-lighter-4
.blue-text .text-lighter-3
.blue-text .text-lighter-2
.blue-text .text-lighter-1
.blue-text
.blue-text .text-darker-1
.blue-text .text-darker-2
.blue-text .text-darker-3
.blue-text .text-darker-4
.blue-text .text-alt-1
.blue-text .text-alt-2
.blue-text .text-alt-3
.blue-text .text-alt-4
.light-blue-text .text-lighter-5
.light-blue-text .text-lighter-4
.light-blue-text .text-lighter-3
.light-blue-text .text-lighter-2
.light-blue-text .text-lighter-1
.light-blue-text
.light-blue-text .text-darker-1
.light-blue-text .text-darker-2
.light-blue-text .text-darker-3
.light-blue-text .text-darker-4
.light-blue-text .text-alt-1
.light-blue-text .text-alt-2
.light-blue-text .text-alt-3
.light-blue-text .text-alt-4
.cyan-text .text-lighter-5
.cyan-text .text-lighter-4
.cyan-text .text-lighter-3
.cyan-text .text-lighter-2
.cyan-text .text-lighter-1
.cyan-text
.cyan-text .text-darker-1
.cyan-text .text-darker-2
.cyan-text .text-darker-3
.cyan-text .text-darker-4
.cyan-text .text-alt-1
.cyan-text .text-alt-2
.cyan-text .text-alt-3
.cyan-text .text-alt-4
.teal-text .text-lighter-5
.teal-text .text-lighter-4
.teal-text .text-lighter-3
.teal-text .text-lighter-2
.teal-text .text-lighter-1
.teal-text
.teal-text .text-darker-1
.teal-text .text-darker-2
.teal-text .text-darker-3
.teal-text .text-darker-4
.teal-text .text-alt-1
.teal-text .text-alt-2
.teal-text .text-alt-3
.teal-text .text-alt-4
.green-text .text-lighter-5
.green-text .text-lighter-4
.green-text .text-lighter-3
.green-text .text-lighter-2
.green-text .text-lighter-1
.green-text
.green-text .text-darker-1
.green-text .text-darker-2
.green-text .text-darker-3
.green-text .text-darker-4
.green-text .text-alt-1
.green-text .text-alt-2
.green-text .text-alt-3
.green-text .text-alt-4
.light-green-text .text-lighter-5
.light-green-text .text-lighter-4
.light-green-text .text-lighter-3
.light-green-text .text-lighter-2
.light-green-text .text-lighter-1
.light-green-text
.light-green-text .text-darker-1
.light-green-text .text-darker-2
.light-green-text .text-darker-3
.light-green-text .text-darker-4
.light-green-text .text-alt-1
.light-green-text .text-alt-2
.light-green-text .text-alt-3
.light-green-text .text-alt-4
.lime-text .text-lighter-5
.lime-text .text-lighter-4
.lime-text .text-lighter-3
.lime-text .text-lighter-2
.lime-text .text-lighter-1
.lime-text
.lime-text .text-darker-1
.lime-text .text-darker-2
.lime-text .text-darker-3
.lime-text .text-darker-4
.lime-text .text-alt-1
.lime-text .text-alt-2
.lime-text .text-alt-3
.lime-text .text-alt-4
.yellow-text .text-lighter-5
.yellow-text .text-lighter-4
.yellow-text .text-lighter-3
.yellow-text .text-lighter-2
.yellow-text .text-lighter-1
.yellow-text
.yellow-text .text-darker-1
.yellow-text .text-darker-2
.yellow-text .text-darker-3
.yellow-text .text-darker-4
.yellow-text .text-alt-1
.yellow-text .text-alt-2
.yellow-text .text-alt-3
.yellow-text .text-alt-4
.amber-text .text-lighter-5
.amber-text .text-lighter-4
.amber-text .text-lighter-3
.amber-text .text-lighter-2
.amber-text .text-lighter-1
.amber-text
.amber-text .text-darker-1
.amber-text .text-darker-2
.amber-text .text-darker-3
.amber-text .text-darker-4
.amber-text .text-alt-1
.amber-text .text-alt-2
.amber-text .text-alt-3
.amber-text .text-alt-4
.orange-text .text-lighter-5
.orange-text .text-lighter-4
.orange-text .text-lighter-3
.orange-text .text-lighter-2
.orange-text .text-lighter-1
.orange-text
.orange-text .text-darker-1
.orange-text .text-darker-2
.orange-text .text-darker-3
.orange-text .text-darker-4
.orange-text .text-alt-1
.orange-text .text-alt-2
.orange-text .text-alt-3
.orange-text .text-alt-4
.deep-orange-text .text-lighter-5
.deep-orange-text .text-lighter-4
.deep-orange-text .text-lighter-3
.deep-orange-text .text-lighter-2
.deep-orange-text .text-lighter-1
.deep-orange-text
.deep-orange-text .text-darker-1
.deep-orange-text .text-darker-2
.deep-orange-text .text-darker-3
.deep-orange-text .text-darker-4
.deep-orange-text .text-alt-1
.deep-orange-text .text-alt-2
.deep-orange-text .text-alt-3
.deep-orange-text .text-alt-4
.brown-text .text-lighter-5
.brown-text .text-lighter-4
.brown-text .text-lighter-3
.brown-text .text-lighter-2
.brown-text .text-lighter-1
.brown-text
.brown-text .text-darker-1
.brown-text .text-darker-2
.brown-text .text-darker-3
.brown-text .text-darker-4
.grey-text .text-lighter-5
.grey-text .text-lighter-4
.grey-text .text-lighter-3
.grey-text .text-lighter-2
.grey-text .text-lighter-1
.grey-text
.grey-text .text-darker-1
.grey-text .text-darker-2
.grey-text .text-darker-3
.grey-text .text-darker-4
.blue-grey-text .text-lighter-5
.blue-grey-text .text-lighter-4
.blue-grey-text .text-lighter-3
.blue-grey-text .text-lighter-2
.blue-grey-text .text-lighter-1
.blue-grey-text
.blue-grey-text .text-darker-1
.blue-grey-text .text-darker-2
.blue-grey-text .text-darker-3
.blue-grey-text .text-darker-4
.black-text
.white-text
.transparent-text - Transparent text here use .transparent-text class.

<div class="red-text">
    <!-- All text here will be red -->
</div>

Font alpha

Since font colors are defined in RGB colors you are able to change also color alpha opacity with text-alpha-* classes. For class to take the effect it must be combined with text color class e.g. red-text text-alpha-4.

normal text
.text-alpha-8
.text-alpha-6
.text-alpha-4
.text-alpha-2

XS Font size

Sometimes is necessary to adjust font size for smaller screens. These classes do the job.

.text-xsmall - x small text on all screens

.text-small - small text on all screens

.text-xsmall .text-sm-normal - x small text on xs screens

.text-small .text-sm-normal - small text on xs screens

.text-md-xsmall .text-lg-normal - x small text on lg screens

.text-md-small .text-lg-normal - small text on lg screens