Source

Text

Dokumentasyon ug mga pananglitan alang sa komon nga mga gamit sa teksto aron makontrol ang paglinya, pagputos, gibug-aton, ug uban pa.

Pag-align sa teksto

Dali nga i-realign ang teksto sa mga sangkap nga adunay mga klase sa pag-align sa teksto.

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. Sa nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit 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>

Para sa wala, tuo, ug center alignment, ang mga responsive nga klase anaa nga naggamit sa samang viewport width breakpoints sama sa grid system.

Wala naka-align nga teksto sa tanang gidak-on sa viewport.

Gi-align sa tunga nga teksto sa tanang gidak-on sa viewport.

Na-align sa tuo nga teksto sa tanang gidak-on sa viewport.

Nakalinya sa wala nga teksto sa mga viewport nga gidak-on SM (gamay) o mas lapad.

Nakalinya sa wala nga teksto sa mga viewport nga may gidak-on nga MD (medium) o mas lapad.

Wala naka-align nga teksto sa mga viewport nga gidak-on sa LG (dako) o mas lapad.

Nakalinya sa wala nga teksto sa mga viewport nga gidak-on XL (sobra-dako) o mas lapad.

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

Pagputos ug pag-awas sa teksto

I-wrap ang teksto sa usa ka .text-wrapklase.

Kini nga teksto kinahanglan nga iputos.

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

Pugngi ang teksto gikan sa pagputos sa usa ka .text-nowrapklase.

Kini nga teksto kinahanglan nga moawas sa ginikanan.

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

Alang sa mas taas nga sulud, mahimo nimong idugang ang usa ka .text-truncateklase aron maputol ang teksto gamit ang usa ka ellipsis. Nagkinahanglan display: inline-blocko display: block.

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>

Pagbag-o sa teksto

Pagbag-o sa teksto sa mga sangkap nga adunay mga klase sa pag-capital sa teksto.

Gigamay nga teksto.

Uppercase nga teksto.

CapiTaliZed nga teksto.

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

Matikdi kung giunsa .text-capitalizepag-usab ang una nga letra sa matag pulong, nga dili maapektuhan ang kaso sa bisan unsang ubang mga letra.

Ang gibug-aton sa font ug italiko

Dali nga usba ang gibug-aton (kabaskog) sa teksto o i-italicize ang teksto.

Bold nga text.

Mas maisogon nga gibug-aton nga teksto (may kalabotan sa elemento sa ginikanan).

Normal nga gibug-aton nga teksto.

Gaan ang gibug-aton nga teksto.

Mas gaan nga gibug-aton nga teksto (may kalabotan sa elemento sa ginikanan).

Italic nga teksto.

<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

Usba ang usa ka pagpili sa among monospace font stack gamit ang .text-monospace.

Kini anaa sa monospace

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

I-reset ang kolor

I-reset ang usa ka teksto o kolor sa link gamit ang .text-reset, aron kini makapanunod sa kolor gikan sa ginikanan niini.

Gipahilom nga teksto nga adunay link sa pag-reset .

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

Dekorasyon sa teksto

Kuhaa ang dekorasyon nga teksto nga adunay .text-decoration-noneklase.

Dili-underline nga link

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