Source

Text

Dokumentasyon at mga halimbawa para sa mga karaniwang text utilities para makontrol ang alignment, wrapping, weight, at higit pa.

Pag-align ng teksto

Madaling i-realign ang text sa mga bahagi na may mga klase ng text alignment.

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 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 kaliwa, kanan, at center alignment, available ang mga tumutugong klase na gumagamit ng parehong mga breakpoint ng lapad ng viewport gaya ng grid system.

Naka-align sa kaliwa ang text sa lahat ng laki ng viewport.

Naka-align sa gitna ang text sa lahat ng laki ng viewport.

Naka-align sa kanan na text sa lahat ng laki ng viewport.

Naka-align sa kaliwa ang text sa mga viewport na may sukat na SM (maliit) o mas malawak.

Naka-align sa kaliwa ang text sa mga viewport na may sukat na MD (medium) o mas malawak.

Naka-align sa kaliwa ang text sa mga viewport na may sukat na LG (malaki) o mas malawak.

Naka-align sa kaliwa ang text sa mga viewport na may sukat na XL (sobrang laki) o mas malawak.

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

Pigilan ang text mula sa pagbalot sa isang .text-nowrapklase.

Ang tekstong ito ay dapat umapaw sa magulang.

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

Para sa mas mahabang nilalaman, maaari kang magdagdag ng isang .text-truncateklase upang putulin ang teksto gamit ang isang ellipsis. Nangangailangan 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>

Pagbabago ng teksto

Ibahin ang anyo ng teksto sa mga bahagi na may mga klase ng text capitalization.

Maliit na titik ang teksto.

Malaking titik ang teksto.

CapiTaliZed na teksto.

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

Pansinin kung paano text-capitalizelamang binabago ang unang titik ng bawat salita, na iniiwan ang kaso ng anumang iba pang mga titik na hindi maaapektuhan.

Timbang ng font at italics

Mabilis na baguhin ang bigat (boldness) ng text o i-italicize ang text.

Makapal na sulat.

Normal na bigat ng text.

Banayad na text.

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