Dokimantasyon ak egzanp pou itilite tèks komen pou kontwole aliyman, anbalaj, pwa, ak plis ankò.

Tèks aliyman

Fasil reyaliye tèks nan eleman ak klas aliyman tèks.

Gen kèk tèks anplasman pou demontre aliyman tèks jistifye. Èske w ap fè menm bagay la pou mwen? Li lè poum fè fas ak mizik la mwen pa miz ou ankò. Tande li bèl, se pou jij la ak ti fi mwen yo pral pran yon vòt. Mwen ka santi yon phoenix anndan mwen. Syèl la fè jalouzi pou lanmou nou, zanj yo ap kriye anwo. Wi, ou mennen m 'nan utopi.

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

Pou aliyman agòch, adwat ak sant, klas ki reponn yo disponib ki sèvi ak menm pwen rupture lajè vi yo ak sistèm kadriyaj la.

Tèks ki aliye sou bò gòch sou tout gwosè fenèt yo.

Santre tèks ki aliye sou tout gwosè fenèt yo.

Tèks ki aliye dwat sou tout gwosè vi yo.

Tèks ki aliye agoch ​​sou fenèt ki gwosè SM (ti) oswa pi laj.

Tèks ki aliye agoch ​​sou fenèt ki gwosè MD (mwayen) oswa pi laj.

Tèks ki aliye sou bò gòch sou fenèt ki gen gwosè LG (gwo) oswa pi laj.

Tèks ki aliye agoch ​​sou fenèt ki gwosè XL (siplemantè) oswa pi laj.

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

Anbalaj tèks ak debòde

Wrap tèks ak yon .text-wrapklas.

Tèks sa a ta dwe vlope.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

Anpeche tèks anvlope ak yon .text-nowrapklas.

Tèks sa a ta dwe debòde paran an.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
</div>

Pou plis kontni, ou ka ajoute yon .text-truncateklas pou tronpe tèks la ak yon elips. Egzije display: inline-blockoswa 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>

Pawòl kraze

Anpeche yon seri tèks ki long kase layout eleman ou yo lè w itilize .text-breakpou mete word-wrap: break-wordak word-break: break-word. Nou itilize word-wrapolye pou yo pi komen overflow-wrappou sipò navigatè pi laj, epi ajoute depreche word-break: break-worda pou evite pwoblèm ak resipyan fleksib.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

Transfòmasyon tèks

Transfòme tèks nan eleman ak klas lèt majiskil.

Tèks miniskil.

Tèks majiskil.

Tèks majiskil.

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

Remake byen ki jan .text-capitalizesèlman chanje premye lèt la nan chak mo, kite ka a nan nenpòt lòt lèt pa afekte.

Pwa font ak italik

Byen vit chanje pwa (kraze) tèks la oswa mete tèks italik.

Tèks fonse.

Tèks ki pi gra (an rapò ak eleman paran an).

Tèks pwa nòmal.

Tèks pwa limyè.

Tèks ki pi lejè (an rapò ak eleman paran an).

Tèks italik.

<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

Chanje yon seleksyon an pil monospace nou an avèk .text-monospace.

Sa a se nan monospace

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

Reyajiste koulè

Reyajiste yon tèks oswa koulè lyen ak .text-reset, pou li eritye koulè a ​​nan men paran li.

Tèks muet ak yon lyen reset .

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

Tèks dekorasyon

Retire yon dekorasyon tèks ak yon .text-decoration-noneklas.

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