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.
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Önem arz eden bir durum. Nos hinc posthac'ta, 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>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
.text-breakto set overflow-wrap: break-word(ve word-break: break-wordIE ve Edge uyumluluğu için) kullanarak uzun metin dizelerinin bileşenlerinizin düzenini bozmasını önleyin .
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>