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

I-wrap ang teksto sa isang .text-wrapklase.

Dapat balot ang tekstong ito.

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

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

Ang tekstong ito ay dapat umapaw sa magulang.

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

Pagputol ng salita

Pigilan ang mahabang string ng text na masira ang layout ng iyong mga bahagi sa pamamagitan ng paggamit .text-breaksa set overflow-wrap: break-word(at word-break: break-wordpara sa IE at Edge compatibility).

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

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.

Mas matapang na bigat ng teksto (na may kaugnayan sa pangunahing elemento).

Normal na bigat ng text.

Banayad na text.

Mas magaan ang bigat ng text (na may kaugnayan sa parent na elemento).

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

Baguhin ang isang seleksyon sa aming monospace font stack na may .text-monospace.

Ito ay nasa monospace

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

I-reset ang kulay

I-reset ang isang text o kulay ng link gamit ang .text-reset, upang mamana nito ang kulay mula sa magulang nito.

Naka-mute na text na may link sa pag-reset .

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

Dekorasyon ng teksto

Mag-alis ng text decoration na may .text-decoration-noneklase.

Hindi nakasalungguhit na link

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