Tɛks

Dokumɛnt ɛn ɛgzampul fɔ kɔmɔn tɛks yutiliti fɔ kɔntrol alaynɛshɔn, rap, wet, ɛn ɔda tin dɛn.

Na dis pej

Teks alaynɛshɔn

I izi fɔ rialayn tɛks to kɔmpɔnɛnt dɛn wit tɛks alaynɛshɔn klas dɛn. Fɔ stat, ɛnd, ɛn sɛnta alaynɛshɔn, rispɔnsiv klas dɛn de we de yuz di sem viupɔt wid brekpɔynt dɛn we di grid sistɛm gɛt.

Start alaynɛt tɛks pan ɔl di sayz dɛn fɔ di viupɔt.

Sɛntral alaynɛd tɛks pan ɔl di sayz dɛn fɔ di viupɔt.

Ɛnd alaynɛt tɛks pan ɔl di sayz dɛn fɔ di viupɔt.

Start alaynɛt tɛks pan viupɔt dɛn we gɛt saiz SM (smɔl) ɔ we big pas dat.

Start alayned tɛks pan viupɔt dɛn we gɛt saiz MD (midul) ɔ we big pas dat.

Start alaynɛt tɛks pan viupɔt dɛn we gɛt LG (big) ɔ we big pas dat.

Start alaynɛt tɛks pan viupɔt dɛn we gɛt sayz XL (ɛkstra-big) ɔ we big pas dat.

html

<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>

<p class="text-sm-start">Start aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p>

Notis se wi nɔ de gi yutiliti klas fɔ jɔstifay tɛks. Pan ɔl we, fɔ di fayn fayn tin dɛn we dɛn rayt, di raytin we dɛn rayt kin luk fayn, i kin mek di wɔd dɛn we de bitwin di wɔd dɛn nɔ gɛt wan kɔmpitishɔn ɛn dat kin mek i at fɔ rid.

Tekst wrap ɛn ɔvaflɔ

Rap tɛks wit wan .text-wrapklas.

Dis tɛks fɔ rap.

html

<div class="badge bg-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

Nɔ mek tɛks nɔ rap wit wan .text-nowrapklas.

Dis tɛks fɔ ful-ɔp di mama ɔ papa.

html

<div class="text-nowrap bg-light border" style="width: 8rem;">
  This text should overflow the parent.
</div>

Wod brek

Nɔ mek lɔng string dɛn na tɛks brok yu kɔmpɔnɛnt dɛn layout bay we yu yuz .text-breakfɔ sɛt word-wrap: break-wordɛn word-break: break-word. Wi de yuz word-wrapinsted ɔf di mɔ kɔmɔn overflow-wrapfɔ wida brawza sɔpɔt, ɛn ad di deprecated word-break: break-wordfɔ avɔyd prɔblɛm wit fleks kɔntena dɛn.

Mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

Notis se fɔ brok wɔd dɛn nɔ pɔsibul na Arabik , we na di RTL langwej we dɛn kin yuz pas ɔl. So .text-breakdɛn pul am na wi RTL kɔmpilayt CSS.

Tekst transfɔm

Transfɔm tɛks insay kɔmpɔnɛnt dɛn wit tɛks kapitaylayz klas dɛn.

Tekst we gɛt smɔl smɔl lɛta dɛn.

Di tɛks we gɛt big big lɛta dɛn.

Tekst we dɛn dɔn Kapitaliz.

html

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

Notis aw i .text-capitalizejɔs de chenj di fɔs lɛta fɔ ɛni wɔd, ɛn lɛf di kes fɔ ɛni ɔda lɛta nɔ afɛkt.

Fɔnt saiz

Kwik kwik wan chenj di font-sizeɔf tɛks. Pan ɔl we wi edlayn klas dɛn (ɛgz., .h1– .h6) de aplay font-size, font-weight, ɛn line-height, dɛn yutiliti ya de aplay nɔmɔ font-size. Sayzin fɔ dɛn yutiliti ya de mach di HTML in edlayn ɛlimɛnt dɛn, so as di nɔmba de go ɔp, dɛn saiz de go dɔŋ.

.fs-1 tɛks

.fs-2 tɛks

.fs-3 tɛks

.fs-4 tɛks

.fs-5 tɛks

.fs-6 tɛks

html

<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>

Kastamayz yu avaylabl font-sizes bay we yu chenj di $font-sizesSass map.

Fɔnt wet ɛn italiks

Kwik kwik wan chenj di font-weightɔ font-stylefɔ tɛks wit dɛn yutiliti ya. font-styledɛn kin shɔt yutiliti dɛn as .fst-*ɛn font-weightdɛn kin shɔt yutiliti dɛn as .fw-*.

Tekst we gɛt bold.

Bolder weit tɛks (rilaytiv to di mama ɛn papa ɛlimɛnt).

Semibold weit tɛks.

Nɔmal wet tɛks.

Layt wet tɛks.

Layt wet tɛks (rilaytiv to di mama ɛn papa ɛlimɛnt).

Tekst we dɛn rayt wit italik.

Tekst wit nɔmal font stayl

html

<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-semibold">Semibold weight text.</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>

Layn ayt

Chenj di layn ayt wit .lh-*yutiliti dɛn.

Dis na wan lɔng paregraf we dɛn rayt fɔ sho aw di layn-ayt fɔ wan ɛlimɛnt kin afɛkt wi yutiliti dɛn. Dɛn kin yuz klas dɛn fɔ di ɛlimɛnt sɛf ɔ sɔm tɛm dɛn de fɔ di ɛlimɛnt we de na di mama ɛn papa. Dɛn klas ya kin kɔstɔmayt as nid de wit wi yutiliti API.

html

<p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>

Monospɛs

Chenj wan sɛlɛkshɔn to wi monospace font stak wit .font-monospace.

Dis na insay wan ples

html

<p class="font-monospace">This is in monospace</p>

Riset di kɔlɔ

Riset wan tɛks ɔ link in kɔlɔ wit .text-reset, so dat i go gɛt di kɔlɔ frɔm in mama ɔ papa.

Tekst we dɛn dɔn muv wit wan link we de riset .

html

<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

Teks dɛkɔreshɔn

Dekɔret tɛks insay kɔmpɔnɛnt dɛn wit tɛks dɛkɔreshɔn klas dɛn.

Dis tɛks gɛt wan layn ɔnda am.

Dis tɛks gɛt wan layn we de go tru am.

Dis link gɛt in tɛks dɛkɔreshɔn we dɛn dɔn pul

html

<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>

Sass bin de

Di tin dɛn we kin chenj

// stylelint-disable value-keyword-case
$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
// stylelint-enable value-keyword-case
$font-family-base:            var(--#{$prefix}font-sans-serif);
$font-family-code:            var(--#{$prefix}font-monospace);

// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
// $font-size-base affects the font size of the body text
$font-size-root:              null;
$font-size-base:              1rem; // Assumes the browser default, typically `16px`
$font-size-sm:                $font-size-base * .875;
$font-size-lg:                $font-size-base * 1.25;

$font-weight-lighter:         lighter;
$font-weight-light:           300;
$font-weight-normal:          400;
$font-weight-semibold:        600;
$font-weight-bold:            700;
$font-weight-bolder:          bolder;

$font-weight-base:            $font-weight-normal;

$line-height-base:            1.5;
$line-height-sm:              1.25;
$line-height-lg:              2;

$h1-font-size:                $font-size-base * 2.5;
$h2-font-size:                $font-size-base * 2;
$h3-font-size:                $font-size-base * 1.75;
$h4-font-size:                $font-size-base * 1.5;
$h5-font-size:                $font-size-base * 1.25;
$h6-font-size:                $font-size-base;

Map dɛn

Fɔnt-sayz yutiliti dɛn de jenarayz frɔm dis map, in kɔmbaynshɔn wit wi yutiliti API.

$font-sizes: (
  1: $h1-font-size,
  2: $h2-font-size,
  3: $h3-font-size,
  4: $h4-font-size,
  5: $h5-font-size,
  6: $h6-font-size
);

Yutiliti dɛn API

Fɔnt ɛn tɛks yutiliti dɛn de diklar insay wi yutiliti dɛn API insay scss/_utilities.scss. Lan aw fɔ yuz di yutiliti dɛn API.

    "font-family": (
      property: font-family,
      class: font,
      values: (monospace: var(--#{$prefix}font-monospace))
    ),
    "font-size": (
      rfs: true,
      property: font-size,
      class: fs,
      values: $font-sizes
    ),
    "font-style": (
      property: font-style,
      class: fst,
      values: italic normal
    ),
    "font-weight": (
      property: font-weight,
      class: fw,
      values: (
        light: $font-weight-light,
        lighter: $font-weight-lighter,
        normal: $font-weight-normal,
        bold: $font-weight-bold,
        semibold: $font-weight-semibold,
        bolder: $font-weight-bolder
      )
    ),
    "line-height": (
      property: line-height,
      class: lh,
      values: (
        1: 1,
        sm: $line-height-sm,
        base: $line-height-base,
        lg: $line-height-lg,
      )
    ),
    "text-align": (
      responsive: true,
      property: text-align,
      class: text,
      values: (
        start: left,
        end: right,
        center: center,
      )
    ),
    "text-decoration": (
      property: text-decoration,
      values: none underline line-through
    ),
    "text-transform": (
      property: text-transform,
      class: text,
      values: lowercase uppercase capitalize
    ),
    "white-space": (
      property: white-space,
      class: text,
      values: (
        wrap: normal,
        nowrap: nowrap,
      )
    ),
    "word-wrap": (
      property: word-wrap word-break,
      class: text,
      values: (break: break-word),
      rtl: false
    ),