Bootstrap’ın grid(ızgara) sistemi sayfa boyunca 12 sütuna izin verir. Eğer istenirse sayfanın genişliği boyunca 12 sütunu kaplayacak şekilde tek bir sütun oluşturulabilir. Bununla birlikte daha küçük gruplara bölünmüş sütunlar birleştirilebilir. Bootstrap’ın grid sisteminin nasıl oluştduğu ve sütunların nasıl gruplara bölündüğü aşağıda’da görülmektedir.

Bootstrap Grid sistemi sayfa genişliğini 100% olarak değerlendirip maksimum 12 sütuna bölme imkanı sunan yapıya dayanır. 100%/12 sütun = 8.33 % olmak üzere her bir sütun bu genişlik değerine sahip olur. aşağıda’da görüldüğü gibi .col-12 class’ı atanmış bir elementin genişliği 100% olacak, .col-6 class’ı atanmış bir elementin genişliği 50% olacaktır.

Grid Sınıflar

Bootstrap grid sisteminde 4 class mevcuttur.

• xs (telefonlar için)
• sm ( tabletler için)
• md (masaüstü için)
• lg (geniş masaüstü için)

Belirtilen classlar daha dinamik ve esnek düzenler oluşturmak için kombine edilebilir.

Bootstrap Grid’in Temel Yapısı

İlk olarak class=”row” kullanılarak bir satır elementi oluşturulur. Daha sonra istenilen sayıda sütun oluşturulu .col-*-* şeklinde sınıflarla. Bu şekilde tanımlanan sınıfların toplam col değeri her satır için her zaman 12 olmalıdır.

3 Eşit Sütun

Aşağıda’da sayfanın 3 eşit sütuna bölünmesi ile ilgili örnek görülmektedir. Bu örnekte yer alan genişlikler tabletler için başlayarak geniş masaüstüne ölçeklenebilir.

2 Eşit Olmayan Sütun

Şekil-11’de 4 ve 8 ölçekli iki eşit olmayan sütuna bölünmesi ile ilgili örnek görülmektedir.