Bootstrap ızgara sistemi esnek bir yapıda inşa edilmiştir ve bir sayfada yatay olarak 12 sütunlu bir yapıya izin verir.
İstenirse yatay olarak 12 sünunun tamamı tek parça olarak kullanabileceğiniz gibi, tek tek 12 sütun da kullanılabilir ya da sütunlardan bazılarını gruplandırılarak da kullanabilirsiniz:
| 1 Sütun | 1 Sütun | 1 Sütun | 1 Sütun | 1 Sütun | 1 Sütun | 1 Sütun | 1 Sütun | 1 Sütun | 1 Sütun | 1 Sütun | 1 Sütun |
| 6 Sütun | 6 Sütun | ||||||||||
| 4 Sütun | 4 Sütun | 4 Sütun | |||||||||
| 4 Sütun | 8 Sütun | ||||||||||
| 9 Sütun | 3 Sütun | ||||||||||
| 12 Sütun | |||||||||||
Izgara sistemi duyarlıdır (responsive) ve ekran boyutuna bağlı olarak sütunlar otomatik olarak yeniden düzenlenecektir.
Toplam 12 sütun veya daha sütun kullanılabileceğine dikkat edilmelidir. Mevcut 12 sütunun tümünü kullanmanız gerekmez.
|
Çok küçük cihazlar <576px |
Küçük cihazlar ≥576px |
Orta boy cihazlar ≥768px |
Büyük cihazlar ≥992px |
Çok büyük cihazlar ≥1200px |
|
|---|---|---|---|---|---|
| Maksimum Taşıyıcı/Kapsayıcı Genişliği | Yok (Otomatik) | 540px | 720px | 960px | 1140px |
| Sınıf Öneki | .col-* |
.col-sm-* |
.col-md-* |
.col-lg-* |
.col-xl-* |
| Sütun Sayısı | 12 | ||||
| Yan Boşluk | 30px (Bir sütunun her iki tarafında 15 piksel) | ||||
| Sütun Gruplandırma | Evet | ||||
| Sütun Düzenleme | Evet | ||||
.col-* (Çok küçük cihazlar - ekran genişliği 576 pikselden az).col-sm-* (Küçük cihazlar - ekran genişliği 576px'e eşit veya daha büyük).col-md-* (Orta boy cihazlar - ekran genişliği 768 piksel'e eşit veya daha büyük).col-lg-* (Büyük cihazlar - 992 piksel'e eşit veya daha büyük ekran genişliği).col-xl-* (Çok büyük cihazlar - 1200px'e eşit veya daha büyük ekran genişliği)<div class="row"> Bir satır oluşturur.
.col-*-* sınıfları sütun oluşturur (istenen sayıda sütun için ilave sınıf ilave edilerek oluşturulur).
ilk yıldız (*) tercih edilecek ekran boyutuna göre, sm, md, lg veya xl olabilir.
İkinci yıldız (*), sütun sayısı, her satırdaki sütun sayısı için sayı en fazla 12 olmalıdır.
<div class="row"> Bir satır oluşturur.
Tek kullanılan .col sınıfı sütun sayısına göre otomatik sütun genişliğini ayarlar.
İki sütun varsa her bir sütun genişliği %50, üç sütun varsa her bir sütun genişliği %33,33 olarak ayarlanır.
<div class="row"> Bir satır oluşturur.
.col-* Buradaki * yerine bir sayı verilebilir. Bir satırdaki sütun toplamının en fazla 12 olması gerektiğine dikkat edin.
Tabletlerden başlayarak ve çok büyük ekranlara kadar dört eşit genişlikte sütun oluşturmak için kullanılabilir.
576 pikselden küçük cep telefonlarında veya ekranlarda, sütunlar otomatik olarak üst üste istiflenir.
Tabletlerden başlayarak ve çok büyük ekranlara kadar eşit genişlikte olmayan sütun oluşturmak için kullanılabilir.
576 pikselden küçük cep telefonlarında veya ekranlarda, sütunlar otomatik olarak üst üste istiflenir.