Bootsrap – Card

Card Bileşenleri için class’lar
En dış div için card class’ı kullanılır.
card: Kart classının kullanıldığı en dış classtır. Bu klas ile kartın dış çerçevesi belirlenir.

card-title: kart içindeki yazının başlığı için kullanılır. tercihen div yerine h4,h5 gibi başlık taglari ile kullanılır.

card-text: kart içindeki yazı için kullanılır. tercihen p tag’i için verilen bir classdır.

card-header: kullanılacak kart içinde başlık bandı olması isteniyor ise kullanılır. tercihen div tag’i içinde kullanılır.

card-footer: kullanılacak kart içinde alt bant kullanılacak ise kullanılır. tercihen div tag’i içinde kullanılır.

card-img-top: kart içinde kullanılacak resim için resmin kart içinde yerleşimini belirlemek amacıyla kullanılan class’tır. img tag için kullanılan bir class’tır.

card-body: kart içinde kullanılan, cart-text, cart-title classlarının içinde bulunduğu div’in class’ı card-body’dir. Hatırlanacağı gibi cart-text -> p tag’inde, card-title ise hx(h1,h2..h5) başlık tag’lerine atanan bir class idi.

<div class=”card w-50″>
</div>

dendiğinde 50 genişliğinde bir kart çerçevesi oluşturacaktır.

Kart içi yazı hizalaması
kullanılan class’lar : text-center, text-right
Bu kart içi yazı hizalamalarını card div’ine ekliyoruz. Böylece kart içi kullanılan card-text’ini hizalamış oluyoruz.

Kartımızın çerçeve rengi için:
Kullanılacak classlar : border-primary, border-secondary, border-success, border-danger, border-warning, border-info, border-light, border-dark
bu çerçeve renkleri card class’ını eklediğiniz div’e eklemeniz gerekmektedir.

Cart içinde silik yazı: Kart içinde yazılan yazılardan, silik görünecek olanları <small> tag’i içinde class olarak text-muted olarak atıyoruz.

Kartların Sayfaya Yerleşimi
Birden fazla kart sayfaya hizalı yerleşimi için card-deck class’ı kullanılırken, Genişliklerine göre kayan bir yerleşim için card-columns class’ı kullanılmış bir div içine alınmaları yeterlidir.