4A Labs

Kartlar

Solda Fotoğraflı Kart Kullanımı

Kod için yukarıdaki kod simgesine tıklayın.

            <div class="card card-left-image" style="width: 20rem;">
                <div class="row card-left-image-padding">
                    <div class="col-4 pr-0">
                        <img class="card-img-top" src="..." alt="Card image cap">
                    </div>
                </div>
                <div class="col-4 pr-0">
                    <div class="card-body card-left-image-body-padding card-box">
                        <p class="card-body-date">Tarih & Saat</p>
                        <h4 class="card-title">Kart Başlığı</h4>
                        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
                        <a href="#" class="btn btn-primary card-left-image-btn-f">Bağlantıya Git</a>
                    </div>
                </div>
            </div>

Tarih & Saat

Kart Başlığı

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

Bağlantıya Git

Tarih & Saat

Kart Başlığı

Bağlantıya Git

Tarih & Saat

Kart Başlığı

Bağlantıya Git

Üstte Fotoğraflı Kart Kullanımı

Kod için yukarıdaki kod simgesine tıklayın.

            <div class="card" style="width: 20rem;">
              <img class="img-responsive" src="..." alt="Card image cap">
              <div class="card-body card-box">
                <p class="card-body-date">Tarih & Saat</p>
                <h4 class="card-title">Kart Başlığı</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <a href="#" class="btn btn-primary card-left-image-btn-f">Bağlantıya Git</a>
              </div>
            </div>

Tarih & Saat

Kart Başlığı

Bağlantıya Git

Tarih & Saat

Kart Başlığı

Bağlantıya Git

Tarih & Saat

Kart Başlığı

Bağlantıya Git

Tarih & Saat

Kart Başlığı

Bağlantıya Git

Sadece içerik olan Kartlar

Kart bloğu oluştururken .card .card-body sınıflarını kullanabilirsiniz. Kartın içinde padding oluşturmak istediğinizde kulanın.

Özel Başlık Kullanımı

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Başlık, içerik ve bağlantı içeren kartlar

Kart başlıkları için .card-title-main & alt başlıklar için .card-subtitle sınıflarını kullanabilirsiniz.

Kart Başlığı

Alt başlık

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Kart bağlantısı Başka bağlantı

Üstbilgi ve Altbilgi

Bir karta üstbilgi ve / veya altbilgi ekleyin.HTML


                            <div class="card">
                              <div class="card-header">
                                Özellikli Öğe
                              </div>
                              <div class="card-body">
                                <h4 class="card-title">Özel Başlık Kullanımı</h4>
                                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                <a href="#" class="btn btn-mnt">Bağlantıya Git</a>
                              </div>
                            </div>

Özellikli Öğe

Özel Başlık Kullanımı

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Bağlantıya Git

Üstbilgi ve Altbilgi - Orta Hizalı

Bir kartın içine isteğe bağlı bir üstbilgi ve / veya altbilgi ekleyin. HTML


                            <div class="card text-center">
                              <div class="card-header">
                                Özellikli Öğe
                              </div>
                              <div class="card-body">
                                <h4 class="card-title">Özel Başlık Kullanımı</h4>
                                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                <a href="#" class="btn btn-mnt">Bağlantıya Git</a>
                              </div>
                              <div class="card-footer">
                                3 gün önce
                              </div>
                            </div>

Özellikli Öğe

Özel Başlık Kullanımı

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Bağlantıya Git

3 gün önce

Metin Hizalama

Metin hizalaması için .text-center .text-right sınıflarını kullanabilirsiniz.

Özel Başlık Kullanımı

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Bağlantıya Git

Özel Başlık Kullanımı

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Bağlantıya Git

Özel Başlık Kullanımı

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Bağlantıya Git

Utilities Kullanımı

Kartların genişiliğini .w-25, .w-50, .w-75, .w-100 sınıflarını kullanarak belirleyebilirsiniz.

Bu kart %75 genişliğe sahiptir.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Bağlantıya Git

Bu kart %50 genişliğe sahiptir.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Bağlantıya Git

Kart Modelleri

Bağlantıya Git

Etkileşimli Kartlar

Özellikli Öğe

Special title treatment

With supporting text below as a natural lead-in to additional content.

Kart Sütunları

Yükseklikleri farklı kartlar, sütunlar halinde listelenebilir. card-columns

Kart Başlığı

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Son güncelleme: 3 gün önce

Kart Başlığı

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Son güncelleme: 3 gün önce

Kart Başlığı

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Son güncelleme: 3 gün önce