Text classes

Contextual colors

Apply a specific colour on your text by using on of this classes: .text-default, .text-blue, .text-grey, .text-red

.text-default Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

.text-primary Nullam id dolor id nibh ultricies vehicula ut id elit.

.text-disabled Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

.text-error Maecenas sed diam eget risus varius blandit sit amet non magna.

.text-warning Nullam id dolor id nibh ultricies vehicula ut id elit.

Dealing with specificity! Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <span> with the class.

Alignments

Easily re-align text to components with text alignment classes.

For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.

.text-left Left aligned text on all viewport sizes.

.text-center Center aligned text on all viewport sizes.

.text-right Right aligned text on all viewport sizes.

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

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

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

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

Wrapping and overflow

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

.text-nowrap

This text should overflow the parent.

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

.text-truncate

This text should be longer then 150px.

Text transformation

Transform text in components with text transform classes. You can use any ot this classes: text-lowercase, text-uppercase or text-capitalize

.text-lowercase Lowercased text

.text-uppercase Uppercased text

.text-capitalize capitalized text

Font weight

Transform text in components with text transform classes. You can use any ot this classes: text-lowercase, text-uppercase or text-capitalize

.font-weight-bold Bold text.

.font-weight-normal Normal weight text.

.font-weight-light Light weight text.

				
<!-- Contextual colors -->
<p class="text-default"> ... </p>
<p class="text-primary"> ... </p>
<p class="text-disabled"> ... </p>
<p class="text-error"> ... </p>
<p class="text-warning"> ... </p>

<!-- Alignments -->
<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-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

<!-- Overflow text - .text-nowrap -->
<div class="text-nowrap" style="width: 120px; background-color: #ccc;">
  This text should overflow the parent.
</div>

<!-- Truncate text - .text-truncate -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
  This text should be longer then 150px.
</span>

<!-- Text transformation -->
<p class="text-lowercase">Lowercased text</p>
<p class="text-uppercase">Uppercased text</p>
<p class="text-capitalize">Capitalized text</p>

<!-- Font weight -->
<p class="font-weight-bold">Bold text</p>
<p class="font-weight-normal">Normal weight text</p>
<p class="font-weight-light">Light weight text</p>