Bootstrap Metin Sınıfları: Hizalama, Boyut, Kalınlık ve Kesme

Metin hizalama ve duyarlı sürümleri

Hizalama sınıfları text-align özelliğini ayarlar: .text-start soldan sağa yazılan sayfada left, .text-end right, .text-center ise center üretir. Bu üç değerin grid ile aynı kırılma noktalarını kullanan duyarlı sürümleri de vardır: .text-sm-start, .text-md-center, .text-xxl-end gibi. Bootstrap mobil öncelikli çalıştığı için duyarlı sınıf "bu genişlik ve üstü" demektir; telefonda ortalanıp masaüstünde başa yaslanan bir başlık için iki sınıfı birlikte yazarsınız:

<p class="text-start">Tüm ekranlarda başa hizalı metin (.text-start)</p>
<p class="text-center">Tüm ekranlarda ortalanmış metin (.text-center)</p>
<p class="text-end">Tüm ekranlarda sona hizalı metin (.text-end)</p>

<p class="text-center text-md-start">Telefonda ortada, md ve üstünde başa hizalı</p>
<p class="text-end text-lg-center">Dar ekranda sağda, lg ve üstünde ortada</p>

Belgenin bilinçli bir tercihi var: iki yana yaslı metin için yardımcı sınıf sunulmaz. Gerekçe olarak iki yana yaslamanın kelime aralıklarını düzensizleştirip okumayı zorlaştırdığı belirtilir. Taşıma notlarına göre v4'teki .text-justify sınıfı bu yüzden v5'te kaldırıldı; .text-left ve .text-right ise RTL desteği için .text-start ve .text-end adını aldı. Eski adların tam listesi geçiş yazısında. Duyarlı sınıfların taban sınıfı ezmesi de sıraya bağlıdır: derlenmiş CSS'te .text-center gibi taban kurallar önce, .text-md-start gibi kırılma noktası kuralları ise dosyanın sonundaki @media (min-width: ...) bloklarında gelir. İkisi de !important taşıdığı için sonra gelen kazanır ve geniş ekranda duyarlı sınıf geçerli olur. Bu yüzden text-center text-md-start birleşiminde HTML'deki yazılış sırası önemli değildir. Kırılma noktalarının piksel değerleri breakpoint yazısında tablo olarak verilir.

Satır kırma, taşma ve uzun kelimeler

Üç sınıf metnin satır sonlarında nasıl davrandığını belirler. .text-wrap white-space: normal vererek metnin alt satıra geçmesine izin verir; bu, rozet gibi varsayılanda tek satırda kalan bileşenlerde işe yarar. .text-nowrap white-space: nowrap ile satır kırmayı engeller; metin kutuya sığmazsa dışarı taşar. .text-break ise boşluk içermeyen uzun dizileri, örneğin bir adresi ya da dosya özetini, kutunun kenarında kırar.

<div class="badge bg-primary text-wrap" style="width: 6rem;">
  Bu rozet metni dar alanda alt satıra geçer.
</div>

<div class="text-nowrap bg-light mt-3" style="width: 8rem;">
  Bu metin satır kırmaz ve kutunun dışına taşar.
</div>

<p class="text-break mt-3">https://ornek.com.tr/cok/uzun/bir/adres/ve-bosluksuz-bir-parca-0123456789abcdefghijklmnopqrstuvwxyz</p>

Rozet örneğinde .text-wrap gerekmesinin nedeni, rozet bileşeninin derlenmiş CSS'te white-space: nowrap ile gelmesidir; sabit genişlik verdiğiniz bir rozet bu sınıf olmadan metni tek satırda tutar ve taşar. .text-nowrap ise tersi durumda işe yarar: tablo hücresindeki bir tarih ya da tutar gibi bölünmemesi gereken kısa ifadeleri bir arada tutar. Bu sınıfı uzun metinlerde kullanmak yatay taşmaya yol açar, bu yüzden yalnızca kısa parçalara verin.

Belge .text-break için iki ayrıntı verir. Sınıf, daha yaygın olan overflow-wrap yerine daha geniş tarayıcı desteği nedeniyle word-wrap: break-word kullanır ve esnek kutu kapsayıcılarındaki sorunları önlemek için kullanımdan kalkmış word-break: break-word değerini de ekler. İkinci ayrıntı RTL ile ilgilidir: en yaygın sağdan sola dil olan Arapçada kelime kırmak mümkün olmadığından bu sınıf RTL derlemesinden çıkarılmıştır. Derlenmiş dosyada bu, kuralı saran rtl:begin:remove yorumlarıyla görülür:

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* (kısaltıldı) */

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}

/* rtl:end:remove */

Harf dönüşümü

.text-lowercase, .text-uppercase ve .text-capitalize sınıfları text-transform özelliğini ayarlar. Belgenin özellikle not düştüğü davranış, .text-capitalize sınıfının yalnızca her kelimenin ilk harfini değiştirmesi ve diğer harflerin büyük küçük durumuna dokunmamasıdır. Kaynak metinde "DEĞİŞMEZ" büyük harfle yazılmışsa öyle kalır. Bu sınıflar HTML'deki metni değiştirmez, yalnızca görünümünü değiştirir; kaynakta metin yazdığınız biçimde kalır. Bu yüzden anlamlı büyük harf kullanımını içerikte yapmak, sınıfı yalnızca görsel düzen için kullanmak daha doğrudur.

Yazı boyutu: .fs-* ve RFS

.fs-1 ile .fs-6 arası sınıflar yalnızca font-size ayarlar ve HTML başlıklarıyla aynı ölçeği kullanır: sayı büyüdükçe boyut küçülür. Belge bunları .h1 ile .h6 sınıflarından ayırır: başlık sınıfları boyutun yanında kalınlık ve satır yüksekliği de verir, .fs-* ise yalnızca boyutu değiştirir. Örneğin bir paragrafı başlık kadar büyük ama normal kalınlıkta göstermek için .fs-2 yeterlidir.

Bu sınıfların ilginç bir yanı, utilities API kaydında rfs: true taşımalarıdır. RFS v5'te varsayılan olarak açıktır ve büyük yazı boyutlarını pencere genişliğine göre ölçekler. Bootstrap 5.0.2 derlenmiş CSS dosyasında bu sınıf ailesi şöyle tanımlıdır:

.fs-1 {
  font-size: calc(1.375rem + 1.5vw) !important;
}

.fs-2 {
  font-size: calc(1.325rem + 0.9vw) !important;
}

/* (kısaltıldı) */

.fs-5 {
  font-size: 1.25rem !important;
}

.fs-6 {
  font-size: 1rem !important;
}

/* (kısaltıldı) */

@media (min-width: 1200px) {
  .fs-1 {
    font-size: 2.5rem !important;
  }

  .fs-2 {
    font-size: 2rem !important;
  }

  /* (kısaltıldı) */
}

Yani .fs-1 dar ekranda calc(1.375rem + 1.5vw) değeriyle pencereyle birlikte büyür, 1200px ve üstünde sabit 2.5rem olur. .fs-5 ve .fs-6 ise zaten küçük oldukları için ölçeklenmez. RFS'nin nasıl çalıştığı ve kapatılması Sass seçenekleri ve RFS yazısında anlatılıyor. Boyut listesi $font-sizes haritasından gelir; haritayı değiştirerek ölçeği özelleştirebilirsiniz.

Kalınlık ve eğik yazı

Kalınlık sınıfları .fw-*, yazı stili sınıfları .fst-* kısaltmasıyla adlandırılır. Beş kalınlık değeri vardır: .fw-light (300), .fw-normal (400), .fw-bold (700), .fw-bolder ve .fw-lighter. Son ikisi sabit bir sayı değil, CSS'in bolder ve lighter anahtar sözcüklerini kullanır; belge bunların üst ögeye göre göreli olduğunu belirtir. Yazı stili için .fst-italic ve .fst-normal bulunur.

<p class="text-lowercase">KÜÇÜK HARFE ÇEVRİLEN METİN</p>
<p class="text-uppercase">büyük harfe çevrilen metin</p>
<p class="text-capitalize">her kelimenin ilk harfi büyür, diğerleri DEĞİŞMEZ</p>

<p class="fs-1">.fs-1 en büyük</p>
<p class="fs-3">.fs-3</p>
<p class="fs-6">.fs-6 gövde boyutu</p>

<p class="fw-bold">Kalın (.fw-bold)</p>
<p class="fw-bolder">Üst ögeye göre bir kademe daha kalın (.fw-bolder)</p>
<p class="fw-normal">Normal kalınlık (.fw-normal)</p>
<p class="fw-light">İnce (.fw-light)</p>
<p class="fw-lighter">Üst ögeye göre bir kademe daha ince (.fw-lighter)</p>
<p class="fst-italic">Eğik yazı (.fst-italic)</p>
<p class="fst-normal">Normal yazı stili (.fst-normal)</p>

v4'ten geçenler için önemli not: .font-weight-bold gibi uzun adlar v5'te .fw-bold, .font-italic ise .fst-italic oldu. 5.0.2'de bu beş değer dışında bir kalınlık sınıfı yoktur; ara bir değer gerekiyorsa utilities API ile eklemeniz gerekir.

Satır yüksekliği, eş aralıklı yazı ve renk sıfırlama

.lh-1, .lh-sm, .lh-base ve .lh-lg sınıfları line-height değerini sırasıyla 1, 1.25, 1.5 ve 2 yapar; bu değerler $line-height-sm, $line-height-base ve $line-height-lg değişkenlerinden gelir. Gövde metninin varsayılan satır yüksekliği 1.5 olduğu için .lh-base çoğunlukla bir bileşenin sıkı aralığını sıfırlamak için kullanılır. Belge, sınıfların ögenin kendisine ya da bazen üst ögeye uygulanabileceğini belirtir; satır yüksekliği miras alındığı için üst ögedeki sınıf tüm paragraflara yayılır.

.font-monospace seçili metni Bootstrap'in eş aralıklı yazı tipi yığınına geçirir ve derlenmiş CSS'te font-family: var(--bs-font-monospace) !important; olarak tanımlıdır. Komut, dosya yolu ya da sipariş numarası gibi karakterlerin hizalı durması gereken içerikte kullanışlıdır. v4'teki adı .text-monospace idi. .text-reset ise metnin ya da bağlantının rengini inherit yaparak üst ögeden almasını sağlar. Son olarak .text-decoration-underline, .text-decoration-line-through ve .text-decoration-none metin süslemesini ayarlar. v5'te bağlantılar varsayılan olarak altı çizili geldiği için .text-decoration-none en çok kullanılanıdır.

<p class="lh-1">Satır yüksekliği 1: satırlar birbirine çok yakın durur, uzun paragraflarda okumayı zorlaştırabilir.</p>
<p class="lh-sm">Satır yüksekliği 1.25: başlık altı açıklamalar için sıkı bir aralık.</p>
<p class="lh-base">Satır yüksekliği 1.5: Bootstrap gövde metninin varsayılan aralığı.</p>
<p class="lh-lg">Satır yüksekliği 2: geniş aralık, kısa ve ferah bloklar için.</p>

<p class="font-monospace">npm install bootstrap</p>

<p class="text-muted">Soluk metin içinde <a href="#" class="text-reset">rengi devralan bağlantı</a>.</p>

<p class="text-decoration-underline">Altı çizili metin</p>
<p class="text-decoration-line-through">Üstü çizili eski fiyat: 499 TL</p>
<a href="#" class="text-decoration-none">Alt çizgisi kaldırılmış bağlantı</a>

Uzun metni üç noktayla kesmek: .text-truncate

.text-truncate taşan metni gizler, sonuna üç nokta koyar ve satır kırmayı kapatır. Belgede kalın harfle yazılan koşul şudur: öge display: block ya da display: inline-block olmalıdır. Bir span varsayılanda satır içi olduğu için tek başına kesilmez; ona .d-inline-block ve bir üst genişlik sınırı vermeniz gerekir. Blok bir öge ise genişliğini kapsayıcısından alır, bu yüzden grid sütunu içinde doğrudan çalışır.

<div class="row">
  <div class="col-2 text-truncate">
    Bu uzun cümle dar sütuna sığmaz ve sonunda üç nokta görünür.
  </div>
</div>

<span class="d-inline-block text-truncate" style="max-width: 150px;">
  Satır içi blok öge olarak kısaltılan uzun dosya adı.pdf
</span>

Bu sınıf yalnızca tek satır için tasarlanmıştır; çok satırlı kısaltma sunmaz. Kesilen metnin tamamı HTML'de kalır, yalnızca görünmez. Kullanıcıların tam metni görebilmesi gerekiyorsa, örneğin dosya adlarında, ögeye bir title özniteliği eklemek ya da metni ayrıntı sayfasında göstermek iyi bir pratiktir. Kart ve tablo hücrelerinde kesme yaparken kapsayıcının genişliğinin gerçekten sınırlı olduğundan emin olun; aksi halde metin hiç kesilmeden satırı uzatır.

Etkileşim: metin seçimi ve işaretçi olayları

.user-select-all ögeye tıklandığında içeriğin tamamının seçilmesini, .user-select-none ise fareyle seçilememesini sağlar; .user-select-auto varsayılan davranışı geri getirir. Bir API anahtarını ya da kurulum komutunu tek tıkla seçtirmek için .user-select-all pratiktir. .pe-none ve .pe-auto sınıfları CSS pointer-events özelliğini ayarlar: birincisi fare, kalem ve dokunma etkileşimini engeller, ikincisi yeniden açar. Özellik miras alındığı için üst ögeye verilen .pe-none tüm çocukları etkiler; çocuklardan birine .pe-auto vererek onu yeniden tıklanabilir yapabilirsiniz.

<p class="user-select-all">sk-test-1234-ABCD (tıklayınca tamamı seçilir)</p>
<p class="user-select-auto">Varsayılan seçim davranışı</p>
<p class="user-select-none">Bu satır fareyle seçilemez</p>

<p>
  <a href="#" class="pe-none" tabindex="-1" aria-disabled="true">Bu bağlantı</a> tıklanamaz.
</p>
<p class="pe-none">
  <a href="#" tabindex="-1" aria-disabled="true">Bu bağlantı</a> üst ögeden pointer-events devraldığı için tıklanamaz,
  <a href="#" class="pe-auto">bu bağlantı</a> ise .pe-auto ile yeniden tıklanabilir.
</p>

Uygulamalı örnek: dosya listesi ve kopyalanabilir komut

Aşağıdaki parça bu yazıdaki sınıfların çoğunu bir arada kullanır. Dosya türü rozeti .text-uppercase ile büyük harfe çevrilir, uzun dosya adı .text-truncate ile kesilir, boyut bilgisi ise .text-nowrap sayesinde "1,2" ile "MB" arasında bölünmez. Alttaki komut satırı eş aralıklı, kalın ve tek tıkla seçilebilir.

<ul class="list-unstyled border rounded">
  <li class="d-flex align-items-center p-2 border-bottom">
    <span class="badge bg-secondary text-uppercase me-2">pdf</span>
    <span class="text-truncate flex-grow-1">2026-yili-hosting-sozlesmesi-son-surum-imzali.pdf</span>
    <span class="text-muted text-nowrap ms-2 small">1,2 MB</span>
  </li>
  <li class="d-flex align-items-center p-2">
    <span class="badge bg-secondary text-uppercase me-2">zip</span>
    <span class="text-truncate flex-grow-1">site-yedegi.zip</span>
    <span class="text-muted text-nowrap ms-2 small">48 MB</span>
  </li>
</ul>

<p class="fs-5 fw-light lh-sm text-center">
  Kurulum komutu: <span class="font-monospace fw-bold user-select-all">npm install bootstrap</span>
</p>

Burada kesmenin esnek kutu içinde çalışmasının nedeni, dosya adı ögesinin .flex-grow-1 ile kalan alanı alması ve .text-truncate sınıfının ona overflow: hidden vermesidir. Esnek kutu sınıfları flex yazısında, rozetler ise badge yazısında anlatılıyor. Yazı boyutu ve kalınlık sınıflarını aynı paragrafta birleştirmek, ayrı bir CSS kuralı yazmadan başlık benzeri bir vurgu elde etmenin kısa yoludur.

Sass tarafı

Kalınlık, satır yüksekliği ve boyut sınıfları şu değişkenlerden ve haritadan beslenir:

// scss/_variables.scss (v5.0.2), kısaltılmış
$font-weight-lighter:         lighter !default;
$font-weight-light:           300 !default;
$font-weight-normal:          400 !default;
$font-weight-bold:            700 !default;
$font-weight-bolder:          bolder !default;

$line-height-base:            1.5 !default;
$line-height-sm:              1.25 !default;
$line-height-lg:              2 !default;

$font-sizes: (
  1: $h1-font-size,
  2: $h2-font-size,
  3: $h3-font-size,
  4: $h4-font-size,
  5: $h5-font-size,
  6: $h6-font-size
) !default;

Metin hizalama kaydında responsive: true bulunduğu için hizalama sınıflarının kırılma noktası sürümleri vardır; boyut, kalınlık, satır yüksekliği, dönüşüm ve süsleme kayıtlarında bu ayar olmadığından .fs-md-3 ya da .fw-lg-bold gibi sınıflar 5.0.2'de yoktur. Kendi değerinizi eklemek ya da bir kaydı duyarlı yapmak için utilities API yazısındaki yöntemi kullanabilirsiniz.

Sık yapılan hatalar

• Satır içi ögede .text-truncate: span kesilmez; .d-inline-block ve bir üst genişlik ekleyin.
• v4 adlarını yazmak: .text-left, .font-weight-bold, .font-italic, .text-monospace ve .text-justify 5.0'da yoktur.
• .fs-* ile başlık beklemek: .fs-2 yalnızca boyutu değiştirir; kalınlık ve satır yüksekliği de gerekiyorsa .h2 sınıfını kullanın.
• Duyarlı boyut sınıfı aramak: .fs-md-* yoktur; büyük boyutlar RFS ile zaten pencereye göre ölçeklenir.
• .pe-none ile devre dışı bırakmak: klavye kullanıcıları ögeye yine ulaşır; tabindex, aria-disabled ya da disabled ekleyin.
• .text-capitalize ile metni düzeltmeye çalışmak: yalnızca ilk harfleri büyütür, yanlış yazılmış büyük harfleri küçültmez.

Sık Sorulan Sorular

Bootstrap'te metni ortalamak için hangi sınıf kullanılır?

.text-center sınıfı satır içi içeriği ögenin ortasına hizalar. Yalnızca belirli ekran genişliğinden sonra ortalamak için .text-md-center gibi duyarlı sürümü kullanın. Bir blok ögeyi kutunun ortasına almak ise ayrı bir iştir ve .mx-auto ya da flex hizalama gerektirir.

Yazı boyutunu ekran genişliğine göre değiştirebilir miyim?

5.0.2'de .fs-md-3 gibi duyarlı boyut sınıfları yoktur. Buna çoğu zaman gerek kalmamasının nedeni RFS'dir: .fs-1 ile .fs-4 arası sınıflar dar ekranda pencereyle birlikte ölçeklenir ve 1200px ve üstünde sabit değerlerine ulaşır. Farklı bir davranış istiyorsanız utilities API ile kaydı duyarlı yapabilirsiniz.

.text-truncate iki satırda kesebilir mi?

Hayır. Sınıf white-space: nowrap ile metni tek satıra zorlar ve taşanı üç noktayla gizler. Çok satırlı kısaltma için Bootstrap 5.0'da hazır bir yardımcı bulunmaz.

Bağlantının alt çizgisini nasıl kaldırırım?

Bağlantıya .text-decoration-none sınıfı verin. Taşıma notlarına göre v5'te bağlantılar, belirli bileşenlerin parçası olmadıkları sürece varsayılan olarak altı çizili gelir.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Bootstrap öğrenme rehberi · Reboot ve tipografi sınıfları · Bootstrap renk sınıfları · Flex yardımcıları · Bootstrap erişilebilirlik · Utilities API