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

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

Kini nga teksto kinahanglan nga moawas sa ginikanan.

<div class="text-nowrap" 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.

Normal nga gibug-aton nga teksto.

Gaan ang gibug-aton nga teksto.

Italic nga teksto.

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>