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-blue Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

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-blue"> ... </p>
<p class="text-grey"> ... </p>
<p class="text-red"> ... </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>