Font Size

Defines the font size of an element.

f-size-xs
f-size-sm
f-size-md
f-size-lg
f-size-xl
f-size-2xl
f-size-3xl
f-size-4xl
f-size-5xl
f-size-6xl
f-size-7xl
f-size-8xl
f-size-9xl
  <div class="d-block">
    <div class="f-size-xs">f-size-xs</div>
    <div class="f-size-sm">f-size-sm</div>
    <div class="f-size-md">f-size-md</div>
    <div class="f-size-lg">f-size-lg</div>
    <div class="f-size-xl">f-size-xl</div>
    <div class="f-size-2xl">f-size-2xl</div>
    <div class="f-size-3xl">f-size-3xl</div>
    <div class="f-size-4xl">f-size-4xl</div>
    <div class="f-size-5xl">f-size-5xl</div>
    <div class="f-size-6xl">f-size-6xl</div>
    <div class="f-size-7xl">f-size-7xl</div>
    <div class="f-size-8xl">f-size-8xl</div>
    <div class="f-size-9xl">f-size-9xl</div>
  </div>
f-size-xs, f-size-sm, f-size-md, f-size-lg, f-size-xl, f-size-2xl, f-size-3xl, f-size-4xl, f-size-5xl, f-size-6xl, f-size-7xl, f-size-8xl, f-size-9xlFront size.
 

Font Weight

Specifies the font weight of an element.

f-weight-light
f-weight-normal
f-weight-medium
f-weight-semibold
f-weight-bold
  <div class="f-weight-light">f-weight-light</div>
  <div class="f-weight-normal">f-weight-normal</div>
  <div class="f-weight-medium">f-weight-medium</div>
  <div class="f-weight-semibold">f-weight-semibold</div>
  <div class="f-weight-bold">f-weight-bold</div>
f-weight-light, f-weight-normal, f-weight-medium, f-weight-semibold, f-weight-boldFont Weight.
 

Font Style

Specifies the font style of an element.

Difficult waffles 0O 3.14
Difficult waffles 0O 3.14
Difficult waffles 0O 3.14
Difficult waffles 0O 3.14
Difficult waffles 0O 3.14
Difficult waffles 0O 3.14
Difficult waffles 0O 3.14
Difficult waffles 0O 3.14
Difficult waffles 0O 3.14
Difficult waffles 0O 3.14
Difficult waffles 0O 3.14
  <div class="gap-4 d-flex d-flex-wrap d-flex-col">
    <div class="f-style-italic">Difficult waffles 0O 3.14</div>
    <div class="f-style-small-caps">Difficult waffles 0O 3.14</div>
    <div class="f-style-caps">Difficult waffles 0O 3.14</div>
    <div class="f-style-unicase">Difficult waffles 0O 3.14</div>
    <div class="f-style-sub">Difficult waffles 0O 3.14</div>
    <div class="f-style-super">Difficult waffles 0O 3.14</div>
    <div class="f-style-line">Difficult waffles 0O 3.14</div>
    <div class="f-style-2line">Difficult waffles 0O 3.14</div>
    <div class="f-style-wavy">Difficult waffles 0O 3.14</div>
    <div class="f-style-strike">Difficult waffles 0O 3.14</div>
    <div class="f-style-vertical h-5rem">Difficult waffles 0O 3.14</div>
  </div>
f-style-italicSelects a font that is classified as italic. If no italic version of the face is available, one classified as oblique is used instead. If neither is available, the style is artificially simulated.
f-style-small-capsEnables display of small capitals (OpenType feature: smcp). Small-caps glyphs typically use the form of uppercase letters but are displayed using the same size as lowercase letters.
f-style-capsEnables display of small capitals for both upper and lowercase letters (OpenType features: c2sc, smcp).
f-style-unicaseEnables display of mixture of small capitals for uppercase letters with normal lowercase letters (OpenType feature: unic).
f-style-subActivates subscript alternate glyphs. If, in a given run, one such glyph is not available for a character, all the characters in the run are rendered using synthesized glyphs.
f-style-superActivates superscript alternate glyphs. If, in a given run, one such glyph is not available for a character, all the characters in the run are rendered using synthesized glyphs.
f-style-strikeStrikethrough text.
f-style-lineUnderline text from the bottom.
f-style-2lineUnderlining text at the bottom and top.
f-style-wavyUnderline text at the bottom in a wave.
f-style-verticalAttempts to typeset all consecutive characters within the box horizontally, such that they take up the space of a single character within the vertical line of the box.
 

Text Color

A wide range of color palettes for the text of an element.

t-color-light
t-color-secondary
t-color-warning
t-color-danger
t-color-success
t-color-info
t-color-primary
t-color-dark
  <div class="t-color-light">t-color-light</div>
  <div class="t-color-secondary">t-color-secondary</div>
  <div class="t-color-warning">t-color-warning</div>
  <div class="t-color-danger">t-color-danger</div>
  <div class="t-color-success">t-color-success</div>
  <div class="t-color-info">t-color-info</div>
  <div class="t-color-primary">t-color-primary</div>
  <div class="t-color-dark">t-color-dark</div>
t-color-light, t-color-secondary, t-color-warning, t-color-danger, t-color-success, t-color-info, t-color-primary, t-color-darkText Color.
 

Text Align

Specifies the alignment of the text inside an element.

t-align-center: text text text text text text text text text
t-align-justify: text text text text text text text text text
t-align-end: text text text text text text text text text
t-align-start: text text text text text text text text text
  <div class="d-flex d-flex-wrap">
    <div class="t-align-center w-50 x p-2">t-align-center: text text text text text text text text text</div>
    <div class="t-align-justify w-50 x p-2">t-align-justify: text text text text text text text text text</div>
    <div class="t-align-end w-50 x p-2">t-align-end: text text text text text text text text text</div>
    <div class="t-align-start w-50 x p-2">t-align-start: text text text text text text text text text</div>
  </div>
t-align-centerThe inline contents are centered within the line box.
t-align-justifyThe inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.
t-align-endThe same as right if direction is left-to-right and left if direction is right-to-left.
t-align-startThe same as left if direction is left-to-right and right if direction is right-to-left.
 

Text Overflow

Defines how the overflowed content gets displayed.

t-overflow-ellipsis: text text text text text text text text text
t-overflow-clip: text text text text text text text text text
  <div class="t-overflow-ellipsis w-50">t-overflow-ellipsis: text text text text text text text text text</div>
  <div class="t-overflow-clip w-50">t-overflow-clip: text text text text text text text text text</div>
t-overflow-ellipsisWill display an ellipsis ('…') to indicate trimmed text. An ellipsis appears inside the content area to reduce the amount of text displayed. If there is not enough space to display the ellipsis, it is cut off.
t-overflow-clipTrim text at the edge of the content area, so truncation may occur in the middle of a character.
 

Text Wrap

Defines whether the word should wrap based on white space or not.

t-wrap: texttext texttext texttext texttext texttext texttext texttext texttext t-wrap: texttext texttext texttext texttext texttext texttext texttext texttext
t-wrap: texttext texttext texttext texttext texttext texttext texttext texttext t-wrap: texttext texttext texttext texttext texttext texttext texttext texttext
t-wrap: texttext texttext texttext texttext texttext texttext texttext texttext t-wrap: texttext texttext texttext texttext texttext texttext texttext texttext 
  <div class="d-flex d-flex-wrap">
    <div class="t-wrap box w-45">
    t-wrap: texttext texttext texttext texttext texttext texttext texttext texttext
    t-wrap: texttext texttext texttext texttext texttext texttext texttext texttext
    </div>
    <div class="t-wrap-line box w-45">
    t-wrap: texttext texttext texttext texttext texttext texttext texttext texttext
    t-wrap: texttext texttext texttext texttext texttext texttext texttext texttext
    </div>
    <div class="t-wrap-no box w-45">
    t-wrap: texttext texttext texttext texttext texttext texttext texttext texttext
    t-wrap: texttext texttext texttext texttext texttext texttext texttext texttext
    </div>
  </div>
t-wrapSequences of white space are preserved. Lines are broken at newline characters, at
, and as necessary to fill line boxes.
t-wrap-noCollapses white space as for normal, but suppresses line breaks (text wrapping) within the source.
t-wrap-lineSequences of white space are collapsed. Lines are broken at newline characters, at
, and as necessary to fill line boxes.