By adding the ‘text-bold’ class to an element the text content of this element will rendered as bold.
By adding the ‘text-center’ class to an element all text content within this element will be centered
By adding the ‘text-right’ class to an element all text content within this element will be aligned to the right
By adding the ‘text-muted’ class to an element the text will be displayed in gray so it does not stand out as much
Please use this class sparingly because there are accessibility issues with this solution. The text might become illegible to users that suffer from a visual impairment due to the low contrast ratio with the background color.
Prevent line breaks (text wrapping) by adding the ‘text-nowrap’ class to an element.
<div class="text-bold">BX Swiss makes it easy</div>
<div class="text-break">BX Swiss makes it easy</div>
<div class="text-center">BX Swiss makes it easy</div>
<div class="text-right">BX Swiss makes it easy</div>
<div class="text-muted">BX Swiss makes it easy</div>
<div class="text-nowrap">BX Swiss makes it easy</div>
<div class="text-bold">BX Swiss makes it easy</div>
<div class="text-break">BX Swiss makes it easy</div>
<div class="text-center">BX Swiss makes it easy</div>
<div class="text-right">BX Swiss makes it easy</div>
<div class="text-muted">BX Swiss makes it easy</div>
<div class="text-nowrap">BX Swiss makes it easy</div>
/* No context defined for this component. */