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.
Ilang placeholder na teksto upang ipakita ang makatwirang pagkakahanay ng teksto. Gagawin mo rin ba para sa akin? Oras na para harapin ang musikang hindi na ako ang iyong muse. Heard it's beautiful, be the judge and my girls gonna take a vote. May nararamdaman akong phoenix sa loob ko. Ang langit ay naninibugho sa ating pag-ibig, ang mga anghel ay umiiyak mula sa itaas. Oo, dinadala mo ako sa utopia.
<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>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.
<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.
<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.
<!-- 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 word-wrap: break-wordat word-break: break-word. Ginagamit namin word-wrapsa halip na ang mas karaniwan overflow-wrappara sa mas malawak na suporta sa browser, at idinaragdag namin ang hindi na ginagamit word-break: break-wordupang maiwasan ang mga isyu sa mga flex container.
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.
<a href="#" class="text-decoration-none">Non-underlined link</a>