Bootstrap Renk Sınıfları: Metin, Arka Plan ve Bağlantı Renkleri

Sekiz tema rengi ve gerçek değerleri

Renk sınıflarının hepsi aynı kaynaktan üretilir: scss/_variables.scss içindeki $theme-colors haritası. Bu haritadaki her anahtar hem .text- hem .bg- hem de .border- önekiyle bir sınıfa dönüşür; butonlar, uyarılar ve tablo varyantları da aynı listeden beslenir. Tema renkleri doğrudan onaltılık kodla değil, genel palet değişkenlerinden atanır: $primary değeri $blue, $secondary değeri $gray-600, $dark değeri ise $gray-900 olarak tanımlıdır. Derlenmiş 5.0.2 dosyasında bu değerler şöyle karşılık bulur:

Son sütun önemli: resmî belgedeki örneklerde warning, info ve light zeminleri koyu metinle, diğerleri beyaz metinle eşleştirilir. Bu eşleşme kendiliğinden olmaz; sınıfı siz yazarsınız. Taşıma notlarına göre v5'te mavi, yeşil, camgöbeği ve pembe tonlar daha yüksek kontrast için güncellendi; v4'ten gelen bir projede renklerin biraz farklı görünmesi bundandır. Geçişin tamamı için Bootstrap 4'ten 5'e geçiş rehberine bakabilirsiniz. Tema renklerini Sass ile değiştirmek ise tema renkleri yazısının konusudur.

Metin rengi: .text-* sınıfları

Metin rengi sınıflarının her biri tek bir color bildirimi üretir ve bildirim !important taşır. Bootstrap 5.0.2 derlenmiş CSS dosyasında örneğin .text-primary sınıfı color: #0d6efd !important; olarak tanımlıdır. Tema renklerinin yanında altı ek değer vardır: .text-body gövde metninin rengini (#212529) verir, .text-muted ikincil açıklamalar için soluk gri (#6c757d) kullanır, .text-white beyazdır, .text-black-50 ve .text-white-50 yüzde 50 saydam siyah ve beyazdır, .text-reset ise rengi inherit yaparak üst ögeden almanızı sağlar.

<p class="text-primary">Birincil renkte metin (.text-primary)</p>
<p class="text-success">İşlem tamamlandı (.text-success)</p>
<p class="text-danger">Bu alan zorunludur (.text-danger)</p>
<p class="text-warning bg-dark">Koyu zemin üzerinde uyarı rengi (.text-warning)</p>
<p class="text-info bg-dark">Koyu zemin üzerinde bilgi rengi (.text-info)</p>
<p class="text-body">Gövde metninin varsayılan rengi (.text-body)</p>
<p class="text-muted">Soluk, ikincil açıklama (.text-muted)</p>
<p class="text-white bg-dark">Koyu zeminde beyaz metin (.text-white)</p>
<p class="text-black-50">Yüzde 50 saydam siyah (.text-black-50)</p>
<p class="text-white-50 bg-dark">Yüzde 50 saydam beyaz (.text-white-50)</p>

Örnekteki .text-warning ve .text-info satırlarının .bg-dark ile birlikte kullanılması bilinçli bir seçimdir: belge de bu iki rengi metin olarak gösterirken koyu zemin ekler, çünkü sarı ve camgöbeği beyaz sayfa üzerinde okunması zor renklerdir. Aynı mantık .text-light ve .text-white-50 için de geçerlidir. Bu sınıfların hangi ögelere uygulanacağı konusunda bir kısıt yoktur; paragraf, span, liste ögesi ya da tablo hücresi olabilir.

Metin rengini kendi kurallarınızda da kullanmak isterseniz Bootstrap her tema rengini :root üzerinde bir CSS değişkeni olarak da yayımlar: --bs-primary, --bs-danger ve diğerleri. Böylece Sass derlemeden color: var(--bs-primary); yazabilirsiniz. CSS değişkenlerinin nasıl çalıştığını CSS değişkenleri rehberinde, Bootstrap'in ürettiği --bs-* değişkenlerinin tam listesini ise Sass seçenekleri ve CSS değişkenleri yazısında bulabilirsiniz.

Renk yardımcıları bileşenlerle birlikte de sık kullanılır. Taşıma notlarına göre v5'te rozetlerin .badge-primary gibi kendi renk sınıfları kaldırıldı; artık rozet rengi doğrudan .bg-primary gibi arka plan yardımcılarıyla verilir. Resmî Pricing şablonunda öne çıkarılan kartın başlığı da text-white bg-primary sınıflarıyla boyanır. Bu yüzden renk sınıflarını öğrenmek, rozet, kart ve uyarı gibi birçok bileşeni renklendirmeyi de öğrenmek demektir. Rozetler badge yazısında, uyarı kutularının kendi renk varyantları ise alert yazısında anlatılıyor.

Özgüllük: sınıf bazen neden etki etmiyor?

Belgenin ayrı bir başlıkla uyardığı durum şudur: bazen bir bileşenin ya da sizin yazdığınız bir seçicinin özgüllüğü, renk sınıfının önüne geçebilir. Yardımcı sınıflar !important kullandığı için çoğu durumda kazanırlar, ancak hedeflediğiniz metin aslında iç içe başka bir ögenin içindeyse ve o iç öge kendi rengini açıkça tanımlıyorsa, dıştaki sınıf içe işlemez. Belgenin önerdiği pratik çözüm, içeriği istenen sınıfı taşıyan bir div ya da daha anlamlı bir ögeyle sarmaktır. Özgüllüğün CSS tarafındaki kuralları için CSS öğrenme rehberine bakabilirsiniz.

Arka plan rengi: .bg-* sınıfları

Arka plan sınıfları metin sınıflarının ikizidir ve her biri background-color özelliğini !important ile ayarlar. Sekiz tema renginin yanında üç ek değer bulunur: .bg-body sayfa gövdesinin zeminini (varsayılanda beyaz) başka ögelere taşımak için v5'te eklendi, .bg-white beyazdır, .bg-transparent ise zemini saydam yapar. Bu son sınıf, kendi zemini olan bir bileşenin rengini kaldırmak istediğinizde işe yarar.

Belgenin kalın harflerle vurguladığı nokta, arka plan sınıflarının metin rengini değiştirmediğidir. .bg-dark verdiğiniz bir kutunun içindeki metin varsayılan koyu gövde rengiyle kalır ve koyu zeminde neredeyse görünmez olur. Bu yüzden zemin rengini seçerken metin rengini de aynı satırda yazmayı alışkanlık hâline getirin:

<div class="p-3 mb-2 bg-primary text-white">.bg-primary ve .text-white</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success ve .text-white</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning ve .text-dark</div>
<div class="p-3 mb-2 bg-info text-dark">.bg-info ve .text-dark</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light ve .text-dark</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark ve .text-white</div>
<div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
<div class="p-3 mb-2 bg-primary bg-gradient text-white">.bg-primary ve .bg-gradient</div>

Örnekteki p-3 ve mb-2 sınıfları yalnızca iç ve dış boşluk verir; ayrıntıları margin ve padding sınıfları yazısında anlatılıyor. Uyarı, bilgi ve açık zeminlerde .text-dark, diğerlerinde .text-white kullanmak resmî örneklerle aynı eşleşmedir.

.bg-gradient ile hafif geçiş

.bg-gradient sınıfı bir renk vermez; zemine üstte yarı saydam beyazla başlayıp aşağı doğru kaybolan doğrusal bir geçiş görüntüsü ekler. Bu yüzden tek başına değil, bir .bg-* sınıfıyla birlikte anlamlıdır. Derlenmiş CSS'te sınıf background-image: var(--bs-gradient) !important; olarak tanımlıdır ve --bs-gradient değişkeni :root üzerinde şu değeri taşır:

:root {
  /* (kısaltıldı) */
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

Belge, kendi CSS kurallarınızda aynı geçişi istiyorsanız background-image: var(--bs-gradient); yazmanızı önerir. Bileşenlerin kendi zeminlerinde geçiş kullanıp kullanmaması ise ayrı bir ayardır: gradient-bg() karışımı geçiş görüntüsünü yalnızca $enable-gradients değişkeni açıksa ekler ve bu değişken varsayılanda false değerindedir. v4'teki .bg-gradient-* sınıfları ve bg-gradient-variant() karışımı v5'te kaldırıldı; yerine bu tek sınıf geldi. Sass tarafında yatay, dikey, çapraz ve dairesel geçiş için gradient-x, gradient-y, gradient-directional, gradient-radial gibi karışımlar da bulunur, ancak belgeye göre arka plan yardımcı sınıfları bu karışımlarla üretilmez.

Bağlantı renkleri: .link-* sınıfları

v5'te önemli bir davranış değişti: .text-* sınıfları artık bağlantılara üzerine gelme ve odak durumu eklemiyor. Bir bağlantıya .text-danger verirseniz bağlantı kırmızı olur ama fare üstüne geldiğinde rengi değişmez. Durum değişimli renkli bağlantı için .link-* yardımcıları kullanılır. Derlenmiş CSS'te örneğin .link-primary normalde #0d6efd, :hover ve :focus durumunda #0a58ca rengindedir; .link-danger için bu ikili #dc3545 ve #b02a37 değerleridir.

<p>
  <a href="#" class="link-primary">Birincil bağlantı</a> |
  <a href="#" class="link-success">Başarı bağlantısı</a> |
  <a href="#" class="link-danger">Tehlike bağlantısı</a> |
  <a href="#" class="link-dark">Koyu bağlantı</a>
</p>
<div class="p-3 mb-3 bg-dark">
  <a href="#" class="link-light">Koyu zemin üzerinde açık renkli bağlantı</a>
</div>
<p class="text-muted">
  Soluk bir paragrafın içinde <a href="#" class="text-reset">rengini üst ögeden alan bağlantı</a>.
</p>

İki ayrıntıya dikkat edin. Birincisi, .link-* kuralları !important taşımaz; metin sınıflarından farklı olarak kendi CSS'inizle daha kolay ezilebilirler. İkincisi, belge bazı bağlantı stillerinin oldukça açık bir ön plan rengi kullandığını, bunların yeterli kontrast için yalnızca koyu zeminde kullanılması gerektiğini söyler; .link-light bunun en belirgin örneğidir. Ayrıca v5'te bağlantıların varsayılan olarak altı çizili geldiğini unutmayın; alt çizgiyi kaldırmak için .text-decoration-none sınıfı vardır ve metin sınıfları yazısında anlatılıyor.

Rengi üst ögeden almak: .text-reset

.text-reset sınıfı color: inherit !important; üretir. Kullanım alanı, varsayılan mavi bağlantı rengini istemediğiniz yerlerdir: soluk bir dipnot paragrafının içindeki bağlantı, kart başlığına sarılmış bir bağlantı ya da koyu bir alt bilgi alanı. Sınıfı bağlantıya verdiğinizde bağlantı, içinde bulunduğu paragrafın rengini kullanır; alt çizgi ise yerinde kalır, çünkü sınıf yalnızca rengi etkiler.

Renk tek başına anlam taşımamalı

Belgedeki bilgi kutusu, rengin yalnızca görsel bir ipucu olduğunu ve ekran okuyucu gibi yardımcı teknolojilerin kullanıcılarına aktarılmadığını hatırlatır. Kırmızı bir metnin hata, yeşil bir metnin başarı anlamına geldiğini yalnızca gören kullanıcı anlar. Bu yüzden rengin taşıdığı anlam ya görünür metnin kendisinden anlaşılmalı ya da .visually-hidden sınıfıyla gizlenmiş ek bir metinle verilmelidir. Aynı uyarı tablo renk varyantları ve uyarı kutuları için de geçerlidir. Konunun tamamı Bootstrap erişilebilirlik yazısında, ARIA tarafı ise ARIA rehberinde anlatılıyor.

Uygulamalı örnek: bakım duyurusu ve hata satırı

Aşağıdaki parça öğrendiklerinizi bir arada kullanır: sarı zemin üzerinde koyu metin ve koyu bağlantı, görünmeyen bir "Hata:" öneki taşıyan kırmızı satır ve Bootstrap'in CSS değişkenlerini kendi sınıfında kullanan bir not kutusu. .ozel-serit sınıfı Bootstrap'e ait değildir, örnekte bizim tanımladığımız bir kuraldır.

<style>
  .ozel-serit {
    border-left: .25rem solid var(--bs-primary);
    background-image: var(--bs-gradient);
  }
</style>

<div class="p-3 mb-3 bg-warning text-dark">
  <p class="mb-1"><b>Planlı bakım:</b> Cumartesi gecesi panel erişimi kısa süre kesilebilir.</p>
  <p class="mb-0">Ayrıntılar için <a href="#" class="link-dark">durum sayfasına</a> bakın.</p>
</div>

<p class="text-danger">
  <span class="visually-hidden">Hata: </span>Ödeme alınamadı, kart bilgilerinizi kontrol edin.
</p>

<div class="p-3 bg-light ozel-serit">
  Kendi sınıfınızda Bootstrap renk değişkenlerini kullanan bir not kutusu.
</div>

Burada .link-dark seçimi, sarı zemin üzerindeki bağlantının hem okunur kalmasını hem de üzerine gelindiğinde renk değiştirmesini sağlar. Kırmızı satırdaki gizli önek, ekran okuyucu kullanıcısının satırın bir hata bildirdiğini rengi görmeden öğrenmesine yardım eder. Not kutusunda ise --bs-primary ve --bs-gradient değişkenleri sayesinde tema rengi değiştiğinde kendi kuralınız da aynı rengi izler, çünkü değişkenler derleme sırasında tema değerlerinden üretilir.

Sass tarafı: sınıflar nereden geliyor?

Renk sınıfları elle yazılmış kurallar değildir; scss/_utilities.scss dosyasındaki yardımcı sınıf API'sinden üretilir. Metin rengi kaydı $theme-colors haritasını birkaç ek değerle birleştirir:

// scss/_utilities.scss (v5.0.2), renk yardımcısının tanımı
"color": (
  property: color,
  class: text,
  values: map-merge(
    $theme-colors,
    (
      "white": $white,
      "body": $body-color,
      "muted": $text-muted,
      "black-50": rgba($black, .5),
      "white-50": rgba($white, .5),
      "reset": inherit,
    )
  )
),

Arka plan kaydı da aynı yapıdadır; tema renklerine body, white ve transparent değerlerini ekler. Gri tonlar ($gray-100 ile $gray-900 arası) ayrı bir $grays haritasında da durur, ancak belge bu haritanın hiçbir yardımcı sınıf üretmediğini açıkça belirtir; yani .bg-gray-200 gibi bir sınıf yoktur. Yeni bir renk sınıfı eklemek ya da mevcut listeyi daraltmak için bu kayıtları değiştirmeniz gerekir; yöntemi utilities API yazısı anlatıyor.

Sık yapılan hatalar

• Yalnızca zemin rengi vermek: .bg-dark metni beyaz yapmaz. Koyu zeminde .text-white, sarı ve açık zeminde .text-dark ekleyin.
• Bağlantıya .text-* vermek: v5'te bu sınıflar üzerine gelme durumu üretmez; durum değişimi isteniyorsa .link-* kullanın.
• v4 adlarını aramak: .bg-gradient-primary gibi sınıflar 5.0'da yoktur; .bg-primary ile .bg-gradient sınıflarını birlikte yazın.
• Gri sınıfı beklemek: $grays haritası yardımcı sınıf üretmez; ara gri bir ton gerekiyorsa API'ye kendi değerinizi ekleyin ya da CSS yazın.
• Anlamı yalnızca renge yüklemek: "kırmızı alanlar hatalıdır" gibi bir açıklama gören olmayan kullanıcıya ulaşmaz; görünür ya da gizli bir metin ekleyin.
• Açık bağlantıyı beyaz zeminde kullanmak: .link-light ve .link-warning beyaz sayfada zor okunur; koyu zemin tercih edin.

Sık Sorulan Sorular

Bootstrap'te metni kırmızı yapmak için hangi sınıf kullanılır?

.text-danger sınıfı metni tema kırmızısına (#dc3545) boyar. Bir bağlantıyı kırmızı yapıp üzerine gelindiğinde koyulaşmasını istiyorsanız .link-danger daha uygundur.

.bg-primary verdiğim kutuda yazı neden okunmuyor?

Arka plan sınıfları color özelliğine dokunmaz, metin varsayılan koyu renkte kalır. Aynı ögeye .text-white ekleyin; sarı, camgöbeği ve açık gri zeminlerde ise .text-dark kullanın.

Kendi rengimi .text-marka gibi bir sınıf olarak nasıl eklerim?

En temiz yol $theme-colors haritasına yeni bir anahtar eklemektir; böylece metin, zemin, kenarlık, buton ve uyarı varyantları birlikte üretilir. Bu, Sass ile derleme gerektirir ve tema renkleri yazısında adım adım anlatılıyor. Yalnızca tek bir sınıf istiyorsanız utilities API ile de ekleyebilirsiniz.

.text-muted ile .text-secondary aynı şey mi?

5.0.2 derlenmiş CSS dosyasında ikisi de #6c757d rengini verir, çünkü $text-muted ve $secondary aynı gri değişkenine bağlıdır. Anlam olarak ise .text-muted ikincil açıklama metni için, .text-secondary tema renginin bir parçası olarak düşünülmüştür; temayı değiştirdiğinizde ikisi farklı değerler alabilir.

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 · Bootstrap tema renkleri · Kenarlık, köşe ve gölge sınıfları · Bootstrap metin sınıfları · Bootstrap tablo sınıfları · Bootstrap erişilebilirlik