Metin
Hizalama, sarma, ağırlık ve daha fazlasını denetlemek için yaygın metin yardımcı programlarına ilişkin belgeler ve örnekler.
Metin hizalama
Metin hizalama sınıflarıyla metni bileşenlere kolayca yeniden hizalayın.
Yaslanmış metin hizalamasını göstermek için bazı yer tutucu metinler. Aynısını benim için de yapar mısın? Müzikle yüzleşme zamanı, artık senin ilham perin değilim. Güzel olduğunu duydum, yargıç ol ve kızlarım oy kullanacak. İçimde bir anka kuşu hissedebiliyorum. Cennet aşkımızı kıskanıyor, yukarıdan melekler ağlıyor. Evet, beni ütopyaya götürüyorsun.
<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>Sola, sağa ve merkeze hizalama için, ızgara sistemiyle aynı görünüm alanı genişliği kesme noktalarını kullanan duyarlı sınıflar mevcuttur.
Tüm görüntü alanı boyutlarında sola hizalanmış metin.
Tüm görüntü alanı boyutlarında ortalanmış metin.
Tüm görüntü alanı boyutlarında sağa hizalanmış metin.
SM (küçük) veya daha geniş görünüm alanlarında sola hizalanmış metin.
MD (orta) veya daha geniş görünüm alanlarında sola hizalanmış metin.
LG (büyük) veya daha geniş görünüm pencerelerinde sola hizalanmış metin.
XL (ekstra büyük) veya daha geniş görünüm alanlarında sola hizalanmış metin.
<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>Metin kaydırma ve taşma
Metni bir .text-wrapsınıfla sarın.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Metnin bir .text-nowrapsınıfla sarılmasını önleyin.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>.text-truncateDaha uzun içerik için, metni üç nokta ile kısaltmak için bir sınıf ekleyebilirsiniz . veya gerektirir .display: inline-blockdisplay: 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>kelime sonu
Uzun metin dizelerinin bileşenlerinizin düzenini bozmasını .text-breakto set word-wrap: break-wordve kullanarak önleyin word-break: break-word. Daha geniş tarayıcı desteği için word-wrapdaha yaygın olanı yerine kullanıyoruz ve esnek kapsayıcılarla ilgili sorunları önlemek için kullanımdan kaldırılanları ekledik.overflow-wrapword-break: break-word
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>Metin dönüştürme
Metin büyük harf sınıfları ile bileşenlerdeki metni dönüştürün.
Küçük harfli metin.
Büyük harfli metin.
CapiTaliZed metin.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>.text-capitalizeHer kelimenin yalnızca ilk harfinin nasıl değiştirildiğini ve diğer harflerin etkilenmediğini unutmayın.
Yazı tipi ağırlığı ve italik
Metnin ağırlığını (kalınlığını) hızla değiştirin veya metni italik yapın.
Kalın yazı.
Daha kalın ağırlıklı metin (ana öğeye göre).
Normal ağırlık metni.
Hafif metin.
Daha hafif metin (ana öğeye göre).
İtalik metin.
<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
Bir seçimi tek aralıklı yazı tipi yığınımıza ile değiştirin .text-monospace.
Bu tek uzayda
<p class="text-monospace">This is in monospace</p>Rengi sıfırla
Bir metnin veya bağlantının rengini ile sıfırlayın .text-reset, böylece rengi üst öğesinden devralır.
Sıfırlama bağlantısı olan sessiz metin .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>Metin dekorasyonu
.text-decoration-noneBir sınıfla bir metin dekorasyonunu kaldırın .
<a href="#" class="text-decoration-none">Non-underlined link</a>