Thumal

Alignment, wrapping, weight leh a dangte control theihna tur common text utility-te tana documentation leh entirnan.

He page ah hian

Text alignment tih a ni

Text alignment class nei component hrang hrangah awlsam takin text realign theih. Start, end, leh center alignment atan chuan grid system ang bawka viewport width breakpoint hmang thei responsive class a awm bawk.

Viewport size zawng zawngah aligned text tan rawh.

Viewport size zawng zawngah center aligned text a awm vek.

Viewport size zawng zawngah aligned text chu tawp rawh.

Viewport size SM (small) emaw a aia zau emaw-ah aligned text tan rawh.

Viewport size MD (medium) emaw a aia zau emaw-ah aligned text tan rawh.

Viewport size LG (large) emaw a aia zau emaw-ah aligned text tan rawh.

Viewport size XL (extra-large) emaw a aia zau emaw-ah aligned text tan rawh.

html tih a ni

<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>

Justified text atan utility class kan pe lo tih hre reng ang che. Aesthetically chuan, justified text chu a hip zawkin a lang thei a, mahse, thumal inthlauhna chu a random zawk a, chuvangin chhiar a harsa zawk a ni.

Text wrapping leh overflow a awm bawk

.text-wrapClass pakhat nen text wrap rawh .

He thuziak hi a wrap tur a ni.

html tih a ni

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

.text-nowrapClass pakhat nena text wrapping loh tur .

He thuziak hian nu leh pa chu a luah khat tur a ni.

html tih a ni

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

Thumal tihchhiat

I components layout tichhia lo turin text string sei tak tak te chu .text-breakto set word-wrap: break-wordleh hmangin ven word-break: break-wordrawh. Browser support zau zawk atan a word-wraptam zawk aiah kan hmang a, flex container-a harsatna awm lo turin deprecated te kan dah belh bawk.overflow-wrapword-break: break-word

A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a.

html tih a ni

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

RTL tawng hman tam ber Arabic -ah chuan breaking words hi a theih loh thu hre reng ang che . Chuvangin .text-breakkan RTL compiled CSS atang hian paih a ni.

Text tihdanglam a ni

Text capitalization class hmangin component hrang hrangah text siam danglam.

Thuziak te tak te.

Thuziak lian tak tak.

CapiTaliZed thuziak a ni.

html tih a ni

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

.text-capitalizeThumal tinte hawrawp hmasa ber chauh a thlak dân chu chhinchhiah ang che , hawrawp dang eng pawh case chu nghawng nei lovin a awmtîr a ni.

Font lian leh te

Rang takin font-sizeof text chu thlak rawh. Kan heading class (eg, .h1– .h6) te hian font-size, font-weight, leh , an hman laiin line-height, heng utilities te hi , chauh an hmang font-sizethin. Heng utilities te tana sizing hi HTML-a heading elements te nen a inmil a, chuvangin number a pun zel chuan an size a tlahniam zel a ni.

.fs-1 thuziak a ni

.fs-2 thuziak a ni

.fs-3 thuziak a ni

.fs-4 thuziak a ni

.fs-5 thuziak a ni

.fs-6 thuziak a ni

html tih a ni

<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>

Sass map font-sizesiam danglamin i s awmsa chu customize rawh .$font-sizes

Font rih zawng leh italics te

font-weightHeng utilities hmang hian or font-styleof text chu rang takin thlak rawh . font-styleutilities tih tawifel a ni a .fst-*, font-weightutilities tih tawifel a .fw-*ni bawk.

Thuziak bold tak a ni.

Bolder weight text (nu leh pa element nena inzawm).

Semibold a rit zawng a ni.

Normal weight thuziak.

Text rit lo tak a ni.

Text rit zawk (parent element nena khaikhin chuan).

Italic hmanga thuziak.

Font style pangngai hmanga thuziak

html tih a ni

<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>

Line san zawng

.lh-*Utilities hmangin line san zawng thlak rawh .

Hei hi kan utilities-in element pakhat line-height a nghawng dan tarlanna atana ziah paragraph sei tak a ni. Class hi element ngeiah emaw, a chang chuan parent element-ah emaw hman a ni. Heng class te hi kan utility API hmang hian a tul angin kan siam thei a ni.

html tih a ni

<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>

Monospace a ni

Kan monospace font stack ah selection pakhat chu .font-monospace.

Hei hi monospace-ah a ni

html tih a ni

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

A rawng chu reset rawh

Text emaw link emaw color chu , hmangin reset la .text-reset, chutiang chuan a parent hnen atangin color chu a inherit thei ang.

Text muted a ni a , reset link a awm bawk .

html tih a ni

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

Thuziak cheimawina

Text decoration class hmangin component hrang hrangah text chei rawh.

He thuziak hian a hnuaiah line a nei a.

He thuziak hian a kal tlangin line a nei a.

He link hian a text decoration chu a paih chhuak a ni

html tih a ni

<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 a ni

Variables te pawh a awm

// 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;

Maps te pawh a awm

He map atang hian font-size utilities siam a ni a, kan utilities API nen a inzawm a ni.

$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
);

Utilities API hmanga thil tih a ni

Font leh text utilities te hi kan utilities API ah hian scss/_utilities.scss. Utilities API hman dan zir rawh.

    "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
    ),