Bootstrap 4'teki bir kart, esnek ve genişletilebilir kenarlıklı bir kutudur. Üstbilgiler, altbilgiler, içerik, renkler vb. için seçenekler içerir.
Bir taşıyıcı ile ( Örnek: <div> ... </div>
) .card
sınıfı ile temel bir kart oluşturulur. Kartın içeriğini kapsayan taşıyıcının .card-body
sınıfı vardır.
.card
- Bir kart oluşturur. <div>
başlık etiketleri kullanılabilir. .card-header
- Bir kart başlığı oluşturur. <div>
başlık etiketleri kullanılabilir. .card-body
- Bir kart gövdesi oluşturur. <div>
başlık etiketleri kullanılabilir. .card-footer
- Bir kart altlığı oluşturur. <div>
başlık etiketleri kullanılabilir. .card-title
- Kart içinde bir başlık oluşturur. <h*>
başlık etiketleri kullanılabilir. .card-subtitle
- Kart içinde bir alt başlık oluşturur. <h*>
başlık etiketleri kullanılabilir. .card-text
- Kart içine metin eklemek için kullanılır. <p>
etiketi kullanılabilir. .card-link
- Kart içine bağlantı eklemek için kullanılır. <a>
etiketi kullanılabilir. .card-header
.card-body
.card-title
.card-subtitle
Kart içeriği metni .card-text
.card-link
Kartlarda resimlerle çalışmak için birkaç seçenek bulunur. Resim kartın üst veya alt tarafına yerleştirilebildiği gibi üst üste bindirmede yapılabilir.
Resmi kartın üst tarafına yerleştirmek için bir <img>
etiketinde .card-img-top
sınıfı, resmi kartın alt tarafına yerleştirmek için .card-img-bottom
sınıfı kullanılabilir.
<img>
etiketi .card
sınıflı etiketi içinde fakat .card-body
sınıfı olan etiketi içine yerleştirilmelidir. Kısaca <img>
etiketi .card-body
sınıfı olan etiketi içine yerleştirilmelidir
<img>
etiketi .card
sınıflı kapsayıcı etiketi içinde, .card-body
sınıfı olan etiketin dışına yerleştirilmelidir.
<img>
etiketinde .card-img-top
sınıfı kullanılır.
<img>
etiketi .card
sınıflı kapsayıcı etiketi içinde, .card-body
sınıfı olan etiketin dışına yerleştirilmelidir.
<img>
etiketinde .card-img-bottom
sınıfı kullanılır.
.card-body
sınıfı yerine içerik taşıyıcı etikette .card-img-overlay
sınıfı kullanılır.
<img>
etiketine .card-img-top
sınıfı kullanılır.
.stretched-link
sınıfı kullanılır.
.card-columns
) ve Renklendirme (.bg-*
) .card-column
sınıfı, kartların otomatik düzenlendiği bir kart sütunu düzeni oluşturmak için kullanılır. Daha fazla kart ekledikçe, düzen otomatik olarak ayarlanır.
Kartların sıralaması yukarıdan aşağıya olacak şekilde sütunlar otomatik düzenlenir.
.card-column
sınıfı kullanılır.
Kartlarda arka plan rengini eklemek için Bootstrap 4 arkaplan renk sınıfları kullanılır. Bu sınıflar .bg-primary
, .bg-success
, .bg-info
, .bg-warning
, .bg-danger
, .bg-secondary
, .bg-dark
ve .bg-light
'dır.
.card
sınıfı tanımlanmış olan taşıyıcıya .card
sınıfı yanında .bg-*
sınıflarından herhangi biri ile renk verilebilir. Böylece kartın tamamına bu renk uygulanır.
.card-header
sınıfı kullanlmış taşıyıcıya .bg-*
renklerinden verilebilir.
.card-body
sınıfı kullanlmış taşıyıcıya .bg-*
renklerinden verilebilir.
.card-footer
sınıfı kullanlmış taşıyıcıya .bg-*
renklerinden verilebilir.
.card-columns
ile kartlar sütunlara dağıtılır.
.card-header
sınıfı kullanılmış taşıyıcıya .bg-primary
renk sınıfı kullanıldı.
.card-columns
ile kartlar sütunlara dağıtılır.
.card-body
sınıfı kullanılmış taşıyıcıya .bg-primary
renk sınıfı kullanıldı.
.card-columns
ile kartlar sütunlara dağıtılır.
.card-header
sınıfı kullanılmış taşıyıcıya .bg-primary
renk sınıfı kullanıldı.
.card-columns
ile kartlar sütunlara dağıtılır.
.card-columns
ile kartlar sütunlara dağıtılır.
.card-columns
ile kartlar sütunlara dağıtılır.
.card-columns
ile kartlar sütunlara dağıtılır.
.card-columns
ile kartlar sütunlara dağıtılır.
.card-columns
ile kartlar sütunlara dağıtılır.
.card-columns
ile kartlar sütunlara dağıtılır.
.card-columns
ile kartlar sütunlara dağıtılır.
.card-columns
ile kartlar sütunlara dağıtılır.
.card-columns
ile kartlar sütunlara dağıtılır.
.card-columns
ile kartlar sütunlara dağıtılır.
.card-deck
).card-deck
sınıfı eşit yükseklikte ve genişlikte bir kart düzeni oluşturur ve kartları desteler. Daha fazla kart eklendikçe, düzen otomatik olarak ayarlanır.
Tüm kartlar bir taşıyıcı içine alınır ve bu taşıyıcıda .card-deck
sınıfı kullanıllır.
.card-deck
ile
Birinci kartın yüksekliğine göre diğer kartların yüksekliği ayarlanır
Birinci kartın yüksekliğine göre diğer kartların yüksekliği ayarlanır
Birinci kartın yüksekliğine göre diğer kartların yüksekliği ayarlanır
Birinci kartın yüksekliğine göre diğer kartların yüksekliği ayarlanır
.card-deck
ile
Birinci kartın yüksekliğine göre diğer kartların yüksekliği ayarlanır
.card-deck
ile
Birinci kartın yüksekliğine göre diğer kartların yüksekliği ayarlanır
.card-deck
ile
Birinci kartın yüksekliğine göre diğer kartların yüksekliği ayarlanır
.card-group
).card-group
sınıfı .card-deck
sınıfına benzer şekilde çalışır. eşit yükseklikte ve genişlikte bir kart düzeni oluşturur ve kartları desteler. Daha fazla kart eklendikçe, düzen otomatik olarak ayarlanır.
Tek fark, .card-group
sınıfı her kart arasındaki sol ve sağ kenar boşluklarını kaldırır.
Tüm kartlar bir taşıyıcı içine alınır ve bu taşıyıcıda .card-group
sınıfı kullanıllır.
.card-group
ile
Kart yükseklikleri eşit olarak ayarlanır ve kartlar arasındaki dış boşluklar (margin) sıfırlanır
.card-group
ile
Kart yükseklikleri eşit olarak ayarlanır ve kartlar arasındaki dış boşluklar (margin) sıfırlanır
Kart yükseklikleri eşit olarak ayarlanır ve kartlar arasındaki dış boşluklar (margin) sıfırlanır
Kart yükseklikleri eşit olarak ayarlanır ve kartlar arasındaki dış boşluklar (margin) sıfırlanır
Kart yükseklikleri eşit olarak ayarlanır ve kartlar arasındaki dış boşluklar (margin) sıfırlanır
.card-group
ile
Kart yükseklikleri eşit olarak ayarlanır ve kartlar arasındaki dış boşluklar (margin) sıfırlanır
.card-group
ile
Kart yükseklikleri eşit olarak ayarlanır ve kartlar arasındaki dış boşluklar (margin) sıfırlanır