in English

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.

Qee qhov chaw muab cov ntawv nyeem los ua kom pom kev ncaj ncees cov ntawv nyeem. Koj puas yuav ua ib yam rau kuv? Nws yog lub sij hawm mus fim lub suab paj nruag kuv tsis yog koj muse. Hnov nws zoo nkauj, ua tus txiav txim thiab kuv cov ntxhais mus pov npav. Kuv tuaj yeem hnov ​​​​phoenix hauv kuv. Saum Ntuj Ceeb Tsheej khib peb txoj kev hlub, cov tub txib saum ntuj quaj los saum ntuj. Yog, koj coj kuv mus rau utopia.

<p class="text-justify">Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</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 tawg koj cov khoom 'layout los ntawm kev siv .text-breaklos teeb tsa word-wrap: break-wordthiab word-break: break-word. Peb siv word-wrapes tsis txhob siv ntau dua overflow-wraprau kev txhawb nqa dav dav ntawm browser, thiab ntxiv qhov tsis word-break: break-wordtxaus siab kom tsis txhob muaj teeb meem nrog flex ntim.

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>