Bootstrap Grid Sistemi

Bootstrap grid (ızgara) sistemi, duyarlı web sayfası düzeni oluşturmanın en hızlı ve en kolay yoludur.

Bootstrap Grid Sistemi Nedir?

Bootstrap grid sistemi, duyarlı web sitesi düzenleri oluşturmanın hızlı ve kolay bir yolunu sağlar. En yeni Bootstrap 4 sürümü, cihaz veya görünüm alanı boyutu arttıkça 12 sütuna kadar uygun şekilde ölçeklenen yeni ilk-mobil flexbox grid sistemini sunar.

Bootstrap 4, cep telefonları, tabletler, dizüstü bilgisayarlar ve masaüstü bilgisayarlar gibi farklı tür aygıtlar için hızlıca grid düzenleri oluşturmak için önceden tanımlanmış grid sınıfları içerir. Örneğin, ekstra küçük cihazlar için cep telefonları için grid sütunları oluşturmak için .col-* sınıflarını kullanabilirsiniz. Portrait (Portre) modunda, benzer şekilde yatay modda cep telefonu gibi küçük ekranlı cihazlar için grid sütunları oluşturmak için .col-sm-* sınıflarını, tabletler gibi orta ekranlı cihazlar için .col-md-* sınıflarını kullanabilirsiniz. Masaüstü bilgisayarlar gibi büyük cihazlar için lg-* sınıfları ve ekstra büyük masaüstü ekranları için .col-xl-* sınıfları kullanılır

Aşağıdaki tabloda yeni grid sisteminin bazı temel özelliklerini özetlemektedir.

Özellikler
Bootstrap 4 Grid Sistemi
Çok küçük
<576px
Küçük
≥576px
Orta
≥768px
Büyük
≥992px
Çok büyük
≥1200px
Maks. container uzunluğuYok (otomatik)540px720px960px1140px
İdeal platformMobil (Portrait)Mobil (Landscape)TabletlerLaptoplarLaptoplar & Masaüstü Bilgisayarlar
Sınıf öneki.col-.col-sm-.col-md-.col-lg-.col-xl-
Sütun sayısı1212121212
Gutter genişliği30 piksel (bir sütunun her iki tarafında 15 piksel)30 piksel 30 piksel 30 piksel30 piksel
NestableEvetEvetEvetEvetEvet
Sütun sırasıEvetEvetEvetEvetEvet

Yukarıdaki tabloda, bir öğeye herhangi bir .col-sm-* sınıfının uygulanması, yalnızca küçük aygıtlarda ki stilini etkilemeyecek, aynı zamanda, ekran genişliğinin 540 piksele eşit veya daha büyük olması durumunda orta, büyük ve ekstra büyük aygıtlarda da etkilenecektir. Benzer şekilde, .col-md-* sınıfı yalnızca orta aygıtlarda ki öğelerin stillendirmesini değil, aynı zamanda bir .col-lg-* veya .col-xl-* sınıfı yoksa, büyük ve ekstra büyük aygıtlarda da stillendirmeyi etkiler.

Asıl soru, bu 12 sütuna duyarlı grid sistemini kullanarak satırların ve sütunların nasıl oluşturulacağını ortaya koyuyor. Cevap oldukça basit, ilk önce .container sınıfını kullanarak satırlarınız ve sütunlarınız için sarmalayıcı görevi gören bir kapsayıcı oluşturun, bundan sonra .row sınıfını kullanarak kap içinde satırlar oluşturun ve kullanabileceğiniz herhangi bir satırın içinde sütunlar oluşturun (.col-*, .col-sm-*, .col-md-*, .col-lg-* ve .col-xl-*). Sütunlar, içeriğimizi yerleştireceğimiz gerçek içerik alanıdır. Bütün bunları gerçek eyleme koyalım. Gerçekten nasıl çalıştığını görelim:

İki Sütun Düzeni Oluşturma

Aşağıdaki örnek; masalar, dizüstü bilgisayarlar ve masaüstü bilgisayarlar gibi orta, büyük ve ekstra büyük cihazlar için iki sütun düzeninin nasıl oluşturulacağını göstermektedir. Ancak, cep telefonlarında (768 pikselden daha küçük ekran genişliği), sütunlar otomatik olarak yatay hale gelecektir.

<div class="container">
    <!-- İki eşit sütunu olan satır -->
    <div class="row">
        <div class="col-md-6">Sol sütun</div>
        <div class="col-md-6">Sağ sütun</div>
    </div>
    
    <!-- 1:2 oranına bölünmüş iki sütunlu satır -->
    <div class="row">
        <div class="col-md-4">Sol sütun</div>
        <div class="col-md-8">Sağ sütun</div>
    </div>
    
    <!-- 1:3 oranına bölünmüş iki sütunlu satır -->
    <div class="row">
        <div class="col-md-3">Sol sütun</div>
        <div class="col-md-9">Sağ sütun</div>
    </div>
</div>

Not: Bir grid düzeninde, içerik sütunların içine yerleştirilmelidir (.col ve .col-*) ve yalnızca sütunlar satırların (.row) hemen alt öğeleri olabilir. Sıralar uygun dolgu ve hizalama için bir .container (sabit genişlik) veya .container akışkan (tam genişlik) içine yerleştirilmelidir.

İpucu: Grid sütun genişlikleri yüzde olarak ayarlanır, bu nedenle her zaman üst öğelerine göre akışkan olarak boyutlandırılırlar. Ek olarak her sütun, ayrı sütunlar arasındaki boşluğu kontrol etmek için yatay bir dolguya (oyuk adı verilir) sahiptir.

Bootstrap grid sistemi 12 sütuna dayandığından, sütunları tek bir satırda (yani yan yana) tutmak için, tek bir satırdaki grid sütun numaralarının toplamı 12’den büyük olmamalıdır. Yukarıdaki örnek kod dikkatlice her satır için on iki (6 + 6, 4 + 8 ve 3 + 9) eklenmiş grid sütunlarının sayısını (örn. col-md-*) bulacaksınız.

Üç Sütun Düzeni Oluşturma

Benzer şekilde, yukarıdaki prensibi temel alarak başka düzenler oluşturabilirsiniz. Örneğin, aşağıdaki örnek dizüstü bilgisayarlar ve masaüstü ekranları için genellikle üç sütun düzeni oluşturacaktır. Ekran çözünürlüğü 992 piksele (örneğin, Apple iPad) eşit veya daha fazla ise, yatay modda tabletlerde de çalışır. Bununla birlikte, portrait modunda grid sütunları her zamanki gibi yatay olacaktır.

<div class="container">
    <!-- Üç eşit sütunlu satır -->
    <div class="row">
        <div class="col-lg-4">Sol sütun</div>
        <div class="col-lg-4">Orta sütun</div>
        <div class="col-lg-4">Sağ sütun</div>
    </div>
    
    <!-- 1:4:1 oranına bölünmüş üç sütunlu satır -->
    <div class="row">
        <div class="col-lg-2">Sol sütun</div>
        <div class="col-lg-8">Orta sütun</div>
        <div class="col-lg-2">Sağ sütun</div>
    </div>
    
    <!-- Eşit olmayan üç sütunlu satır -->
    <div class="row">
        <div class="col-lg-3">Sol sütun</div>
        <div class="col-lg-7">Orta sütun</div>
        <div class="col-lg-2">Sağ sütun</div>
    </div>
</div>

Not: Tek bir satıra 12’den fazla grid sütunu yerleştirilirse, bir bütün olarak her bir ekstra sütun grubu yeni bir satıra sarılır.

Bootstrap Otomatik Düzen Sütunları

Herhangi bir sütun numarası belirtmeden, .col sınıfını basitleştirerek tüm aygıtlar için eşit genişlikte sütunlar (çok küçük, küçük, orta, büyük ve çok büyük) oluşturabilirsiniz.

Tam olarak nasıl çalıştığını anlamak için aşağıdaki örneği deneyelim:

<div class="container">
    <!-- İki eşit sütunu olan satır -->
    <div class="row">
        <div class="col">Birinci sütun</div>
        <div class="col">İkinci sütun</div>
    </div>
    
    <!-- Üç eşit sütunlu satır -->
    <div class="row">
        <div class="col">Birinci sütun</div>
        <div class="col">İkinci sütun</div>
        <div class="col">Üçüncü sütun</div>
    </div>
</div>

Ek olarak, bir sütunun genişliğini de ayarlayabilir ve kardeş sütunları etrafında eşit olarak otomatik olarak yeniden boyutlandırılmasını sağlayabilirsiniz. Önceden tanımlanmış grid sınıflarını veya satır içi genişlikleri kullanabilirsiniz.

Aşağıdaki örneği denerseniz, .col sınıfının eşit genişliğe sahip üst üste sütunlarını bulacaksınız.

<div class="container">
    <!-- İki eşit sütunu olan satır -->
    <div class="row">
        <div class="col">Birinci sütun</div>
        <div class="col">İkinci sütun</div>
    </div>
    
    <!-- 1:2:1 oranına bölünmüş üç sütunlu satır -->
    <div class="row">
        <div class="col">Birinci sütun</div>
        <div class="col-sm-6">İkinci sütun</div>
        <div class="col">Üçüncü sütun</div>
    </div>
</div>

Kolon Sarma Davranışı (Column Wrapping Behavior)

Şimdi, görünümün boyutuna göre sütun yönünü değiştiren daha esnek düzenler oluşturacağız. Aşağıdaki örnek, dizüstü bilgisayarlar ve masaüstü bilgisayarlar gibi büyük cihazlarda ve yatay modda tabletlerde (örneğin Apple iPad), ancak portrait modunda tabletler gibi orta cihazlarda (768px ekran genişliği <992px) üç sütun düzeni oluşturacaktır. Üçüncü sütunun ilk iki sütunun dibinde hareket ettiği iki sütun düzenine dönüşecektir.

<div class="container">
    <div class="row">
        <div class="col-md-4 col-lg-3">İlk sütun</div>
        <div class="col-md-8 col-lg-6">İkinci sütun</div>
        <div class="col-md-12 col-lg-3">Üçüncü sütun</div>
    </div>
</div>

Yukarıdaki örnekte görebileceğiniz gibi orta grid sütun sayılarının toplamı (yani col-md-*) 3 + 9 + 12 = 24 > 12, dolayısıyla .col-md- sınıfına sahip üçüncü öğesidir. Bir .row‘da maksimum 12 sütunun ötesine ekstra sütunlar ekleyen 12, orta ekranlı cihazlarda bitişik bir birim olarak yeni bir satıra sarılır.

Benzer şekilde, Bootstrap’in grid sütun sarma özelliğini kullanarak web siteleriniz için daha da uyarlanabilir düzenler oluşturabilirsiniz. Bir sonraki makalede, bu özelliğin diğer özelliğini göreceksiniz.

Bootstrap ile Çok Sütunlu Düzen Oluşturma

Yeni Bootstrap 4 mobil ilk flexbox grid sistemi ile web sitesi düzeninizin cep telefonları, tabletler, masaüstleri, vb. gibi farklı ekran veya görünüm boyutlarına sahip farklı cihaz türlerinde nasıl işleyeceğini kolayca kontrol edebilirsiniz.

Bootstrap Grid Sistemi Örneği

Yukarıdaki çizimde, tüm cihazlarda toplam 12 içerik kutusu vardır, ancak yerleşimi, mobil cihazda olduğu gibi, düzeneğin 1 sütun ve üst üste yerleştirilmiş 12 satırdan oluşan bir sütun grid düzeni olarak gösterildiği gibi, cihazın ekran boyutuna göre değişir. Tablette ise 2 sütun ve 6 satırdan oluşan iki sütun grid düzeni olarak işlenir.

Ayrıca, dizüstü bilgisayarlar ve masaüstü bilgisayarlar gibi büyük ekranlı cihazlarda 3 sütun ve 4 sıralı üç sütun grid düzeni ve son olarak büyük masaüstleri gibi ekstra büyük ekranlı cihazlar halinde 4 sütunu ve 3 olan dört sütun grid düzeni olarak satırlar işlenir.

Bir diğer asıl soru, bu Bootstrap yeni grid sistemini kullanarak nasıl duyarlı düzenler oluşturabileceğimizdir. Birincil hedef cihazla başlayalım. Ana hedef cihazımızın dizüstü bilgisayar veya normal masaüstü olduğunu varsayalım. Dizüstü bilgisayar düzenimiz 3 sütun ve 4 satır yani 3×4 grid düzenine sahip olduğundan, bu tür grid yapısını yapmak için HTML kodu buna benzer.

<div class="container">
    <div class="row">
        <div class="col-lg-4"><p>1. Kutu</p></div>
        <div class="col-lg-4"><p>2. Kutu</p></div>
        <div class="col-lg-4"><p>3. Kutu</p></div>
        <div class="col-lg-4"><p>4. Kutu</p></div>
        <div class="col-lg-4"><p>5. Kutu</p></div>
        <div class="col-lg-4"><p>6. Kutu</p></div>
        <div class="col-lg-4"><p>7. Kutu</p></div>
        <div class="col-lg-4"><p>8. Kutu</p></div>
        <div class="col-lg-4"><p>9. Kutu</p></div>
        <div class="col-lg-4"><p>10. Kutu</p></div>
        <div class="col-lg-4"><p>11. Kutu</p></div>
        <div class="col-lg-4"><p>12. Kutu</p></div>
    </div>
</div>

Yukarıdaki örneğin çıktısını 992 pikselden büyük veya 1200 pikselden küçük ekran veya görünüm genişliğine sahip bir dizüstü bilgisayarda veya masaüstünde görürseniz, düzeni her satırın 3×4 grid sonuçlanan 3 eşit sütuna sahip 4 satırı olduğunu göreceksiniz.

Şimdi düzenimizi diğer cihazlar için özelleştirmenin zamanı geldi. İlk önce tablet için özelleştirerek başlayalım. Tabletin içinde düzenimiz 2×6 gridler (yani 2 sütun ve 6 satır) olarak olacak. Öyleyse her sütuna .col-md-6 sınıfını ekleyin.

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6"><p>1. Kutu</p></div>
        <div class="col-lg-4 col-md-6"><p>2. Kutu</p></div>
        <div class="col-lg-4 col-md-6"><p>3. Kutu</p></div>
        <div class="col-lg-4 col-md-6"><p>4. Kutu</p></div>
        <div class="col-lg-4 col-md-6"><p>5. Kutu</p></div>
        <div class="col-lg-4 col-md-6"><p>6. Kutu</p></div>
        <div class="col-lg-4 col-md-6"><p>7. Kutu7</p></div>
        <div class="col-lg-4 col-md-6"><p>8. Kutu</p></div>
        <div class="col-lg-4 col-md-6"><p>9. Kutu</p></div>
        <div class="col-lg-4 col-md-6"><p>10. Kutu</p></div>
        <div class="col-lg-4 col-md-6"><p>11. Kutu</p></div>
        <div class="col-lg-4 col-md-6"><p>12. Kutu</p></div>
    </div>
</div>

İpucu: Kolaylık sağlamak için birincil hedef cihazınızı seçin ve ardından diğer cihazlar için duyarlı hale getirmek üzere sınıflar ekledikten sonra o cihaz için düzen oluşturun.

Benzer şekilde, büyük bir masaüstü ekranı gibi ekstra büyük cihazlar için düzeni, her sütuna .col-xl-3 sınıfını ekleyerek özelleştirebilirsiniz. Çünkü ekstra geniş cihaz düzenimizdeki her satır 4 sütun içerir. İşte tüm süreci birleştirdikten sonraki son kod aşağıdadır.

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6 col-xl-3"><p>1. Kutu</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>2. Kutu</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>3. Kutu</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>4. Kutu</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>5. Kutu</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>6. Kutu</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>7. Kutu</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>8. Kutu</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>9. Kutu</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>10. Kutu</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>11. Kutu</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>12. Kutu</p></div>
    </div>
</div>

İpucu: Yukarıdaki çizime göre, cep telefonları için düzeni özelleştirmeye gerek yoktur. Çünkü ekstra küçük cihazlardaki sütunlar otomatik olarak yatay hale gelir ve .col-* veya .col-sm-* sınıflarının yokluğunda 1×12 sütun grid düzeni olarak işlenir.

Grid Sütunlarının Yerleştirilmesi

Bootstrap grid sütunları da nesneldir, yani var olan bir sütunun içine satır ve sütun koyabilirsiniz. Bununla birlikte, sütunları yerleştirme formülü aynı olacaktır. Yani, sütun numaralarının toplamı tek bir satırda 12 veya daha az olmalıdır.

<div class="container">
    <div class="row">
        <div class="col-sm-8">Sol sütun</div>
        <div class="col-sm-4">
            <!-- İç içe geçmiş satırlara ve sütunlara sahip sağ sütun -->
            <div class="row">
                <div class="col-12"></div>
            </div>
            <div class="row">
                <div class="col-6"></div>
                <div class="col-6"></div>
            </div>
        </div>
    </div>
</div>

Değişkene Sahip Genişlik Sütunları Oluşturma

col-{breakpoint}-auto sınıflarını, içeriklerinin doğal genişliğine göre sütunları boyutlandırmak için kullanabilirsiniz. Nasıl çalıştığını görmek için aşağıdaki örneği deneyin:

<div class="container">
    <div class="row justify-content-md-center">
        <div class="col-md-3">Sol sütun</div>
        <div class="col-md-auto">Değişkene sahip genişlik sütunu</div>
        <div class="col-md-3">Sağ sütun</div>
    </div>
    <div class="row">
        <div class="col">Sol sütun</div>
        <div class="col-auto">Değişkene sahip genişlik sütunu</div>
        <div class="col">Sağ sütun</div>
    </div>
</div>

Grid Sütunlarının Hizalanması

Bir container içindeki grid sütunlarını dikey ve yatay olarak hizalamak için esnek kutu hizalama yardımcı sınıflarını kullanabilirsiniz. Nasıl çalıştığını anlamak için aşağıdaki örnekleri deneyin:

Grid Sütunlarının Dikey Hizalanması

Grid sütunlarını sırasıyla bir container üstünde, ortasında ve altında dikey olarak hizalamak için .align-items-start, .align-items-center ve .align-items-end sınıflarını kullanabilirsiniz.

<div class="container">
    <div class="row align-items-start">
        <div class="col">Birinci sütun</div>
        <div class="col">İkinci sütun</div>
        <div class="col">Üçüncü sütun</div>
    </div>
    <div class="row align-items-center">
        <div class="col">Birinci sütun</div>
        <div class="col">İkinci sütun</div>
        <div class="col">Üçüncü sütun</div>
    </div>
    <div class="row align-items-end">
        <div class="col">Birinci sütun</div>
        <div class="col">İkinci sütun</div>
        <div class="col">Üçüncü sütun</div>
    </div>
</div>

Bir satır içindeki ayrı sütunlar da dikey olarak hizalanabilir. İşte bir örnek:

<div class="container">
    <div class="row">
        <div class="col align-self-start">Birinci sütun</div>
        <div class="col align-self-center">İkinci sütun</div>
        <div class="col align-self-end">Üçüncü sütun</div>
    </div>
</div>

Not: .col-* grid sınıfındaki sayıyı atlayabilir ve tüm aygıtlar için eşit boyutta sütunlar oluşturmak için .col sınıfını kullanabilirsiniz (çok küçük, küçük, orta, büyük ve çok büyük).

Grid Sütunlarının Yatay Hizalanması

Grid sütunlarını sırasıyla bir container’ın solunda, ortasında ve sağında yatay olarak hizalamak için .justify-content-start, .justify-content-center ve .justify-content-end sınıflarını kullanabilirsiniz. Nasıl çalıştığını görmek için aşağıdaki örneği inceleyelim:

<div class="container">
    <div class="row justify-content-start">
        <div class="col-4">Birinci sütun</div>
        <div class="col-4">İkinci sütun</div>
    </div>
    <div class="row justify-content-center">
        <div class="col-4">Birinci sütun</div>
        <div class="col-4">İkinci sütun</div>
    </div>
    <div class="row justify-content-end">
        <div class="col-4">Birinci sütun</div>
        <div class="col-4">İkinci sütun</div>
    </div>
</div>

Alternatif olarak, grid sütunları her iki ucunda yarı-boy (half-size) boşluklarla eşit olarak dağıtmak için .justify-content-around sınıfını kullanabilirsiniz; başında ve sonunda bulunan son sütun. Nasıl çalıştığını görmek için aşağıdaki örneği deneyin:

<div class="container">
    <div class="row justify-content-around">
        <div class="col-4">Birinci sütun</div>
        <div class="col-4">İkinci sütun</div>
    </div>
    <div class="row justify-content-between">
        <div class="col-4">Birinci sütun</div>
        <div class="col-4">İkinci sütun</div>
    </div>
</div>

Grid Sütunlarının Yeniden Sıralanması

Grid sütunlarınızın görsel sırasını, asıl işaretleme deki sırasını değiştirmeden bile değiştirebilirsiniz. Sütunu en son sıraya koymak için .order-last sınıfını, sütunu ilk sırada sıralamak için .order-first sınıfını kullanın. Bir örnek alalım:

<div class="container">
    <div class="row">
        <div class="col order-last">En son sırada yer alacak</div>
        <div class="col">Sırasız</div>
        <div class="col order-first">İlk sırada yer alacak</div>
    </div>
</div>

Sıra numaralarına bağlı olarak grid sütunlarını sıralamak için .order-* sınıflarını da kullanabilirsiniz. Daha yüksek sıra numarasına sahip grid sütunu, daha düşük sıra numarasına sahip grid sütunundan veya sıra sınıfı içermeyen grid sütunundan sonra gelir. Beş grid katmanının her birinde 1’den 12’ye kadar desteklenir.

<div class="container">
    <div class="row">
        <div class="col order-4">En son sırada yer alacak</div>
        <div class="col">İlk sırada yer alacak</div>
        <div class="col order-1">İkinci sırada yer alacak</div>
    </div>
</div>

Grid Sütunlarını Ofsetleme (Offsett)

Ayrıca .offset-sm-*, .offset-md-*, .offset-lg-* gibi sütun ofset sınıflarını kullanarak grid sütunlarını hizalama amacıyla sağa taşıyabilirsiniz.

Bu sınıflar, yalnızca sol kenar boşluğunu belirtilen sütun sayısı kadar artırarak sütunları dengeler. Örneğin, .col-md-8 sütunundaki .offset-md-4 sınıfı, orijinal konumundan dört sütun üzerinde sağa taşır. Nasıl çalıştığını görmek için aşağıdaki örneği deneyin:

<div class="container">
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-8"></div>
    </div>
    <div class="row">        
        <div class="col-sm-8 col-sm-offset-4">
            <!-- 4 sütunlu ofset sütunu --> 
        </div>
    </div>
</div>

Kenar boşluğu yardımcı sınıflarını kullanarak da sütunları uzaklaştırabilirsiniz. Bu sınıflar ofsetin genişliğinin sabit olmadığı durumlarda kullanışlıdır. İşte bir örnek:

<div class="container">
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4 ml-auto">
            <!-- Bu sütunu sağa kaydır -->
        </div>
    </div>
    <div class="row">
        <div class="col-auto mr-auto"></div>
        <div class="col-auto">
            <!-- Bu sütunu önceki sütundan uzağa taşı -->
        </div>
    </div>
</div>

Not: .col-auto sınıfını, yalnızca gerektiği kadar yer alan sütunlar oluşturmak için kullanabilirsiniz. Yani sütun, içeriğe bağlı olarak kendisini boyutlandırır.

Kompakt (Compact) Sütun Oluşturma

Kompakt düzenler oluşturmak için sütunlar arasındaki varsayılan olukları, .row sınıfının içerisine .no-gutters sınıfını ekleyin. Bu sınıf, negatif kenar boşluklarını satırdan ve yatay dolguyu tüm alt sütunlardan kaldırır. İşte bir örnek:

<div class="row no-gutters">
    <div class="col-4">Birinci sütun</div>
    <div class="col-4">İkinci sütun</div>
    <div class="col-4">Üçüncü sütun</div>
</div>

Sütunları Yeni Bir Satıra İttirme

Sütunların yeni bir satıra ittirilmesini istediğiniz sütuna .w-100 sınıfını ekleyerek birden çok satıra yayılan eşit genişlikte sütunlar da oluşturabilirsiniz. Ek olarak, .w-100 sınıfını duyarlı ekran yardımcı sınıflarıyla birleştirerek bu sonları yanıt verebilir hale getirebilirsiniz.

<div class="container">
    <!-- Tüm cihazlarda sütunları ittir -->
    <div class="row">
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="w-100"></div>
        <div class="col">.col</div>
        <div class="col">.col</div>
    </div>
    <!-- Ekstra büyük cihazlar hariç tüm cihazlarda sütunları ittir -->
    <div class="row">
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="w-100 d-xl-none"></div>
        <div class="col">.col</div>
        <div class="col">.col</div>
    </div>
</div>

Yeni Bootstrap 4 grid sisteminin temellerini anladığınızı umarım. Gelecek birkaç makalede, bu esnek container grid sistemini kullanarak temel web sayfası düzenlerinin nasıl oluşturulacağını öğreneceksiniz.

Kaynak: https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php