Bootstrap 5 Card (Kart) Bileşeni: Yapı, Görseller, Düzen ve Stretched Link

Kartın temel yapısı ve CSS kuralı

Kart flexbox ile kurulmuştur ve diğer bileşenlerle kolay birleşir. Bootstrap 5.0.2 derlenmiş CSS dosyasında bu sınıf şöyle tanımlıdır:

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}

Bu kuraldaki üç satır günlük kullanımda çok iş görür. flex-direction: column sayesinde kartın çocukları alt alta dizilir ve .card-body (flex: 1 1 auto) kalan yüksekliği doldurur; eşit yükseklikteki kartlarda alt bilgilerin hizalanması buradan gelir. position: relative, kartı .stretched-link için hazır bir konumlandırma kabı yapar. word-wrap: break-word ise uzun bir adresin ya da kelimenin kartı taşırmasını önler. Kartın margin değeri olmadığını da unutmayın: alt alta kartlar arasında boşluk istiyorsanız mb-3 gibi bir boşluk yardımcısı ekleyin.

<div class="card" style="width: 18rem;">
  <img src="/img/sunucu.jpg" class="card-img-top" alt="Sunucu odası">
  <div class="card-body">
    <h5 class="card-title">Bulut sunucu</h5>
    <h6 class="card-subtitle mb-2 text-muted">Linux, 2 çekirdek</h6>
    <p class="card-text">Küçük ve orta ölçekli projeler için başlangıç yapılandırması.</p>
    <a href="#" class="card-link">Ayrıntılar</a>
    <a href="#" class="card-link">Karşılaştır</a>
  </div>
</div>

Kartın parçaları: hangi sınıf ne işe yarar?

.card-title ve .card-subtitle bir .card-body içine yerleştirildiğinde aralarındaki boşluk düzgün hizalanır. Belgelerdeki örneklerde alt başlığa ayrıca mb-2 text-muted verildiğine dikkat edin; soluk renk ve boşluk kart bileşeninden değil yardımcı sınıflardan gelir. .card-text içinde standart HTML etiketleriyle (<strong>, <small> gibi) biçimlendirme yapabilirsiniz.

Üst ve alt şeritler için .card-header ve .card-footer kullanılır. Derlenmiş CSS'te başlık şeridi 0.5rem 1rem dolgu ve rgba(0, 0, 0, 0.03) arka plan alır; yani çok hafif bir gri. Başlık şeridini doğrudan bir başlık etiketi yapmak isterseniz <h5 class="card-header"> yazabilirsiniz. Şeridin altındaki gövdeye alıntı koymak için resmî örnek <blockquote class="blockquote mb-0"> kullanır.

Kartlarda liste grubu ve gezinme

Kartın içine maddeler koymanın en temiz yolu kenar boşluksuz bir liste grubudur: .list-group-flush dış kenarlıkları ve köşe yuvarlaklıklarını kaldırır, böylece liste kartın kenarlarına tam oturur. Liste grubu, başlık şeridiyle ve alt şeritle birlikte de kullanılabilir. Liste grubunun kendi seçenekleri Bootstrap list group yazısında ayrıntılı anlatılıyor.

<div class="card" style="width: 18rem;">
  <div class="card-header">Paket özellikleri</div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">10 GB disk</li>
    <li class="list-group-item">Sınırsız trafik</li>
    <li class="list-group-item">Günlük yedek</li>
  </ul>
  <div class="card-footer text-muted">Fiyatlara KDV dahildir</div>
</div>

Başlık şeridine sekme ya da hap biçiminde gezinme koymak için Bootstrap'in nav bileşeni kullanılır. Burada iki özel sınıf vardır: .nav-tabs ile birlikte .card-header-tabs, .nav-pills ile birlikte .card-header-pills. Bu sınıflar nav'ın kenar boşluklarını kart şeridine göre ayarlar. Sekmelerin içerik değiştirmesi ayrı bir JavaScript davranışıdır ve nav tabs ve pills yazısında anlatılıyor.

Görseller: üst, alt ve kaplama (overlay)

Kartlarda görseller üç şekilde yer alır. .card-img-top görseli kartın üstüne, .card-img-bottom altına oturtur ve ilgili köşeleri kartın yarıçapına göre yuvarlar. Üçüncü yol görseli kartın arka planı yapmaktır: görsele .card-img, metni taşıyan kardeş <div> öğesine .card-img-overlay verilir. Kaplama katmanı derlenmiş CSS'te position: absolute ve dört kenarı 0 olacak şekilde tanımlıdır, yani görselin tamamını kaplar ve 1rem dolgu alır.

<div class="card bg-dark text-white">
  <img src="/img/veri-merkezi.jpg" class="card-img" alt="Veri merkezi koridoru">
  <div class="card-img-overlay">
    <h5 class="card-title">Yeni bölge açıldı</h5>
    <p class="card-text">Kısa bir duyuru metni görselin üstünde durur.</p>
  </div>
</div>

Kart genişliği: grid, yardımcı sınıf ya da özel CSS

Kart varsayılan olarak yüzde yüz genişliktedir. Belgeler genişliği ayarlamanın üç yolunu gösterir. Birincisi kartları grid sütunlarına koymaktır: .row içinde iki .col-sm-6 sütun açıp her birine bir kart yerleştirirseniz sm ve üstünde iki kart yan yana, daha dar ekranda alt alta durur. İkincisi .w-75, .w-50 gibi boyut yardımcılarıdır. Üçüncüsü de satır içi stil ya da kendi stil dosyanızdır; belgelerdeki örneklerin çoğu style="width: 18rem;" kullanır. Uzun vadede grid yaklaşımı en esnek olanıdır, çünkü kırılma noktalarına göre sütun sayısını değiştirebilirsiniz; grid temelleri Bootstrap grid sistemi yazısında.

Metin hizalaması için kartın tamamına ya da yalnızca bir parçasına .text-center veya .text-end eklemeniz yeterlidir; kartın kendine ait bir hizalama sınıfı yoktur.

Yatay kart: görsel solda, metin sağda

Kartı yatay yapmak için grid ve yardımcı sınıflar birlikte kullanılır. Kartın içine .row g-0 açılır; .g-0 sütunlar arasındaki gutter boşluğunu sıfırlar. Görsel .col-md-4, içerik .col-md-8 sütununa konur. Sonuç olarak md ve üstünde kart yatay, altında dikey görünür. Belgeler içeriğe göre ek ayar gerekebileceğini de not eder.

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="/img/yazar.jpg" class="img-fluid rounded-start" alt="Yazar fotoğrafı">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Haftanın yazısı</h5>
        <p class="card-text">Görsel solda, metin sağda duran yatay bir kart örneği.</p>
        <p class="card-text"><small class="text-muted">3 dakika önce güncellendi</small></p>
      </div>
    </div>
  </div>
</div>

Görselin yalnızca sol köşelerinin yuvarlanması için .rounded-start kullanılır; bu ve diğer köşe sınıfları border ve rounded sınıfları yazısında. Gutter yönetiminin tamamı gutter sınıfları yazısının konusu.

Renk, zemin ve kenarlık seçenekleri

Kartın kendine ait renk varyantları yoktur; zemin için .bg-*, metin için .text-* yardımcıları kullanılır. Koyu zemin seçtiğinizde metni de açık renge çevirmeniz gerekir: bg-primary text-white gibi. Belgelerin örneğinde warning, info ve light zeminli kartlarda text-dark, diğerlerinde text-white kullanılır. Yalnızca kenar rengini değiştirmek için .border-success gibi bir sınıf eklenir; metin rengi sınıfını kartın tamamına ya da yalnızca .card-body gibi bir parçasına verebilirsiniz.

<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Durum</div>
  <div class="card-body text-success">
    <h5 class="card-title">Tüm servisler çalışıyor</h5>
    <p class="card-text">Son kontrol 5 dakika önce yapıldı.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Ayrıntılı rapor</div>
</div>

Bu örnekte başlık ve alt şeridin hafif gri zemini .bg-transparent ile kaldırılır, ayırıcı çizgilerin rengi de .border-success ile kartın kenarına uydurulur. Renk sınıflarının tam listesi renk sınıfları yazısında. Rengin tek başına anlam taşımaması kuralı burada da geçerlidir: "Tüm servisler çalışıyor" bilgisini yeşil renk değil, metnin kendisi vermelidir.

Kart düzenleri: card-group, row-cols ve eşit yükseklik

Birden fazla kartı yan yana dizmenin iki yolu vardır. .card-group, kartları kenarları birleşmiş, eşit genişlik ve yükseklikte tek bir blok olarak gösterir. Derlenmiş CSS'e göre grup başlangıçta alt alta durur ve her karta 0.75rem alt boşluk verir; min-width: 576px (yani sm) ve üstünde display: flex ile yan yana geçer, kartlar flex: 1 0 0% alır ve aradaki kenarlıklarla köşe yuvarlaklıkları kaldırılır. Kartların alt şeritleri de bu sayede otomatik hizalanır. Belgeler bu düzen seçeneklerinin henüz duyarlı (responsive) olmadığını belirtir; yani kaç kartın yan yana duracağını kırılma noktasına göre değiştiremezsiniz.

Esnek düzen için ikinci yol grid'dir. Kartları .col sütunlarına koyup üst .row öğesine .row-cols-1 .row-cols-md-3 gibi sınıflar verirsiniz: dar ekranda tek sütun, md ve üstünde üç sütun. .g-4 kartlar arasına hem yatay hem dikey boşluk koyar. Kartların aynı yükseklikte olması için her karta .h-100 ekleyin; bunu varsayılan yapmak isterseniz Sass tarafında $card-height: 100% değişkeni vardır. v4'teki .card-deck ve .card-columns v5'te kaldırıldı; ilkinin yerini bu grid kalıbı, ikincisinin yerini ise Bootstrap'e dahil olmayan Masonry eklentisi aldı.

Bütün kartı tıklanabilir yapmak: stretched-link

Bir kartın yalnızca butonu değil tamamı tıklanabilir olsun istiyorsanız karttaki bağlantıya .stretched-link eklemeniz yeterlidir. Bu sınıf bağlantıya bir ::after sözde öğesi ekler; derlenmiş CSS'te bu öğe position: absolute, dört kenarı 0 ve z-index: 1 ile tanımlıdır. Sözde öğe, bağlantının içinde bulunduğu kapsayıcı bloğu ("containing block") kaplar. Kartlar zaten position: relative olduğu için ek bir şey yapmanız gerekmez.

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Alan adı sorgulama</h5>
    <p class="card-text">Kartın herhangi bir yerine tıklamak sorgulama sayfasını açar.</p>
    <a href="#" class="btn btn-primary stretched-link">Sorgula</a>
  </div>
</div>

Kart dışındaki kendi bileşenlerinizde kapsayıcıya .position-relative eklemeniz gerekir; belgeler bunun bağlantının üst öğenin dışına yayılmasını önlediğini söyler. Bağlantı beklenenden küçük bir alana yayılıyorsa neden yine kapsayıcı bloktur: aradaki bir öğe static dışında bir position, none dışında bir transform ya da perspective değeri alırsa yeni kap o olur. Bağlantının kendisine position: relative verirseniz yayılma hiç çalışmaz. Belgeler ayrıca uzatılmış bağlantıyla aynı kartta başka bağlantı ve dokunma hedefleri kullanmayı önermez ve .stretched-link'in çoğu tablo öğesiyle birlikte kullanılamayacağını not eder. Konumlandırma yardımcıları position sınıfları yazısında.

Uygulamalı mini örnek: fiyat kartları

Resmî Pricing şablonu kart, grid ve buton sınıflarını bir arada kullanır. Aşağıdaki kısaltılmış sürümde dar ekranda kartlar alt alta, md ve üstünde üç sütunluk bir satırda yan yana durur. Öne çıkan paket border-primary kenarı ve renkli başlık şeridiyle ayrışır; butonlar .w-100 ile kart genişliğini doldurur.

<div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
  <div class="col">
    <div class="card mb-4 rounded-3 shadow-sm">
      <div class="card-header py-3"><h4 class="my-0 fw-normal">Başlangıç</h4></div>
      <div class="card-body">
        <h1 class="card-title">0 TL<small class="text-muted fw-light">/ay</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>1 site</li>
          <li>E-posta desteği</li>
        </ul>
        <button type="button" class="w-100 btn btn-lg btn-outline-primary">Ücretsiz başla</button>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card mb-4 rounded-3 shadow-sm border-primary">
      <div class="card-header py-3 text-white bg-primary border-primary"><h4 class="my-0 fw-normal">Profesyonel</h4></div>
      <div class="card-body">
        <h1 class="card-title">Paket fiyatı<small class="text-muted fw-light">/ay</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>10 site</li>
          <li>Öncelikli destek</li>
        </ul>
        <button type="button" class="w-100 btn btn-lg btn-primary">Hemen başla</button>
      </div>
    </div>
  </div>
</div>

Şablondaki rounded-3 ve shadow-sm yardımcıları kart bileşeninin parçası değildir; kartın köşesini biraz daha yuvarlar ve hafif bir gölge ekler. Örnekteki fiyatlar yer tutucudur. Benzer bir galeri düzeni için resmî Album şablonuna, sepet özetindeki liste kullanımı için Checkout şablonuna bakabilirsiniz.

Sass değişkenleri

Kart görünümünü toplu değiştirmek için _variables.scss içindeki kart değişkenleri kullanılır. Önemli olanlar: $card-spacer-y ve $card-spacer-x (gövde dolgusu, varsayılan $spacer, yani 1rem), $card-border-color (rgba($black, .125)), $card-cap-bg (başlık ve alt şerit zemini, rgba($black, .03)), $card-bg (beyaz), $card-height (varsayılan null) ve $card-group-margin. Bu değişkenleri ezme yöntemi Sass ile özelleştirme yazısında.

Sık yapılan hatalar

• Kartlar arasında boşluk beklemek: Kartın dış boşluğu yoktur; mb-3 ya da grid'de g-* kullanın.
• card-deck aramak: v5'te yoktur; row row-cols-* g-* kalıbına geçin.
• card-group'un mobilde yan yana kalmasını beklemek: Grup sm altında kartları alt alta dizer ve sütun sayısı kırılma noktasına göre değiştirilemez.
• Eşit yükseklik için yalnızca grid kullanmak: Sütunlar eşit uzar ama kartın kendisi uzamaz; karta .h-100 ekleyin.
• Kaplamaya uzun metin koymak: Metin görselin dışına taşar.
• stretched-link'i transform alan bir öğe içinde kullanmak: Bağlantı yalnızca o öğeye yayılır.
• Koyu zeminde metin rengini unutmak: .bg-* yalnızca arka planı değiştirir; text-white ya da text-dark ekleyin.

Sık Sorulan Sorular

Kartları yan yana eşit boyda nasıl dizerim?

<div class="row row-cols-1 row-cols-md-3 g-4"> içine her kartı bir .col ile koyun ve kartlara .h-100 ekleyin. Kenarları birleşik görünüm istiyorsanız .card-group da kullanabilirsiniz.

Kartın altındaki bilgileri aynı hizaya nasıl getiririm?

Bunları .card-footer içine koyun. Belgelere göre hem .card-group hem .h-100 verilmiş grid kartlarında alt şeritler otomatik hizalanır.

Bootstrap kartında gölge var mı?

Varsayılan kartta gölge yoktur, yalnızca ince bir kenarlık vardır. Resmî şablonlar .shadow-sm yardımcısıyla gölge ekler; gölge sınıfları border ve shadow yazısında.

Masonry düzeni Bootstrap 5.0'da var mı?

Hayır. v4'teki CSS tabanlı .card-columns kaldırıldı. Belgeler bu düzen için Bootstrap'e dahil olmayan Masonry eklentisini kullanmanızı önerir ve bir demo şablonu sunar.

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 · Grid sistemi · List group · Buton sınıfları · Görsel sınıfları · CSS flexbox rehberi