Bootstrap Grid Systems Nedir ?

Bootstrap grid sistemi flexbox sistemi ile oluşturulmuştur ve sayfa boyunca 12 adete kadar sütuna izin verir.

Izgara sistemi responsive’dir ve sütunlar ekran boyutuna göre otomatik olarak yeniden düzenlenir.

Bootstrap grid sistemini kullanabilmek için bir div classı oluşturur ve ihtiyacımıza göre kolonu ve sayısını toplamı 12yi geçmeyecek şekilde belirterek çağırırız.

örneğin 2li yan yana sütun oluşturmak istiyor isek :

<div class="row mb-5">

<div class="col-6 bg-warning border border-secondary">SÜTUN 6 </div>

<div class="col-6 bg-danger border border-secondary">SÜTUN 6 </div>

</div>

Grid sistemleri responsive’dir , telefon ve tabletlere sutunlarımızı belirterek uyarlayabiliriz. örneğin:

.col- (ekstra küçük cihazlar – ekran genişliği 576 pikselden az)
.col-sm- (küçük cihazlar – ekran genişliği 576 piksele eşit veya daha büyük)
.col-md- (orta cihazlar – ekran genişliği 768 piksele eşit veya daha büyük)
.col-lg- (büyük cihazlar – ekran genişliği 992 piksele eşit veya daha büyük)
.col-xl- (xlarge cihazlar – ekran genişliği 1200 piksele eşit veya daha büyük)

bu sayede kullandığımız ekran boyutu küçültüp-büyüdükçe farklı görünümler elde edilebilmek mümkündür.

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>

yukarıdaki  örnek, tabletlerden başlayıp ekstra büyük masaüstlerine kadar ölçeklenen dört eşit genişlikte sütunun nasıl oluşturulacağını gösterir. Genişliği 576 pikselden az olan cep telefonlarında veya ekranlarda, sütunlar otomatik olarak üst üste yığılır.

Eşit Olmayan Sütunlar:

Aşağıdaki örnek, tabletlerden başlayan ve büyük ekstra masaüstlerine ölçeklenen iki farklı genişlikte sütunun nasıl alınacağını gösterir:

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>