Source

Ntawv nyeem

Cov ntaub ntawv thiab cov piv txwv rau cov ntawv nyeem siv los tswj kev sib dhos, qhwv, qhov hnyav, thiab lwm yam.

Cov ntawv nyeem alignment

Yooj yim realign cov ntawv rau cov khoom nrog cov chav kawm ntawv nyeem.

Ambitioni dedisse scripsisse audicaretur. Cras mattis iudicium purus zaum amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. Ntawm nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae nyob rau hauv diem certam indicere. Cras mattis iudicium purus zaum amet fermentum.

<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>

Rau sab laug, sab xis, thiab qhov chaw nyob nruab nrab, cov chav kawm teb muaj nyob uas siv tib qhov kev pom dav dav ntawm cov phiaj xwm phiaj xwm.

Sab laug dlhos cov ntawv ntawm txhua qhov loj ntawm qhov chaw saib.

Muab cov ntawv nyob hauv nruab nrab ntawm txhua qhov loj ntawm qhov chaw saib.

Txoj cai dlhos cov ntawv ntawm txhua qhov loj ntawm qhov chaw saib.

Sab laug dlhos cov ntawv ntawm viewports loj SM (me) los yog dav dua.

Sab laug dlhos cov ntawv ntawm viewports loj MD (nruab nrab) los yog dav dua.

Sab laug dlhos cov ntawv ntawm viewports loj LG (loj) los yog dav dua.

Sab laug dlhos cov ntawv ntawm viewports loj XL (ntxiv-loj) los yog dav dua.

<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>

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

Text wrapping thiab overflow

Qhwv ntawv nrog ib .text-wrapchav kawm.

Cov ntawv no yuav tsum qhwv.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

Tiv thaiv cov ntawv los ntawm kev qhwv nrog ib .text-nowrapchav kawm.

Cov ntawv no yuav tsum dhau tus niam txiv.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
</div>

Rau cov ntsiab lus ntev dua, koj tuaj yeem ntxiv ib .text-truncatechav kawm los txiav cov ntawv nrog ellipsis. Xav tau display: inline-blocklos yog display: block.

Praeterea iter est quasdam res quas ex communi.
Praeterea iter est quasdam res quas ex communi.
<!-- Block level -->
<div class="row">
  <div class="col-2 text-truncate">
    Praeterea iter est quasdam res quas ex communi.
  </div>
</div>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
  Praeterea iter est quasdam res quas ex communi.
</span>

Lo lus tawg

Tiv thaiv cov hlua ntev ntawm cov ntawv los ntawm kev rhuav tshem koj cov khoom 'layout los ntawm kev siv .text-breaklos teeb tsa overflow-wrap: break-word(thiab word-break: break-wordrau IE & Edge compatibility).

hmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

Cov ntawv hloov pauv

Hloov cov ntawv hauv cov khoom nrog cov chav kawm ntawv sau ntawv.

Cov ntawv qis.

Uppercased ntawv nyeem.

CapiTaliZed ntawv nyeem.

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

Nco ntsoov yuav ua li cas .text-capitalizetsuas yog hloov thawj tsab ntawv ntawm txhua lo lus, tawm hauv rooj plaub ntawm lwm cov ntawv tsis cuam tshuam.

Font hnyav thiab italics

Ceev hloov qhov hnyav (boldness) ntawm cov ntawv los yog italicize cov ntawv.

Cov ntawv loj.

Bolder hnyav ntawv (xws li niam txiv lub ntsiab).

Cov ntawv hnyav li qub.

Lub teeb nyhav ntawv.

Cov ntawv hnyav dua (xws li niam txiv lub ntsiab).

Italic ntawv nyeem.

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

Monospace

Hloov ib qho kev xaiv rau peb monospace font pawg nrog .text-monospace.

Qhov no yog nyob rau hauv monospace

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

Rov pib xim

Pib dua cov ntawv nyeem lossis txuas cov xim nrog .text-reset, kom nws tau txais cov xim los ntawm nws niam nws txiv.

Muted ntawv nrog ib tug reset link .

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

Cov ntawv kho kom zoo nkauj

Tshem cov ntawv kho kom zoo nkauj nrog .text-decoration-nonechav kawm.

<a href="#" class="text-decoration-none">Non-underlined link</a>