Text Utilities

Bullframe CSS provides utilities for controlling text appearance and behavior.

Text Alignment

<p class="bf-t-left">Left aligned</p>
<p class="bf-t-center">Center aligned</p>
<p class="bf-t-right">Right aligned</p>
<p class="bf-t-justify">Justified</p>

Text Transform

<p class="bf-t-transform-uppercase">UPPERCASE TEXT</p>
<p class="bf-t-transform-lowercase">lowercase text</p>
<p class="bf-t-transform-capitalize">capitalized text</p>
<p class="bf-t-transform-none">No transform</p>

Text Decoration

<p class="bf-t-decoration-underline">Underlined</p>
<p class="bf-t-decoration-line-through">Strikethrough</p>
<p class="bf-t-decoration-none">No decoration</p>

Font Weight

<p class="bf-font-weight-normal">Normal weight</p>
<p class="bf-font-weight-bold">Bold</p>
<p class="bf-font-weight-bolder">Bolder</p>
<p class="bf-font-weight-lighter">Lighter</p>

Font Style

<p class="bf-font-style-normal">Normal</p>
<p class="bf-font-style-italic">Italic</p>

Text Hide

Hide text visually while keeping it accessible to screen readers:

<span class="bf-text-hide">Hidden text</span>

Screen Reader Only

Show text only to screen readers:

<span class="bf-sr-only">Screen reader only</span> <span class="bf-sr-only focusable">Focusable screen reader text</span>