Yatay Hizalama
3 kolondan bir tanesi
3 kolondan bir tanesi
3 kolondan bir tanesi
3 kolondan bir tanesi
3 kolondan bir tanesi
3 kolondan bir tanesi
3 kolondan bir tanesi
3 kolondan bir tanesi
3 kolondan bir tanesi
3 kolondan bir tanesi
3 kolondan bir tanesi
3 kolondan bir tanesi
Kolon Kaydırma
.col-9
.col-4
9 + 4 = 13 > 12 olduğundan, bu 4 sütun genişliğinde div, bitişik bir birim olarak yeni bir satıra sarılır.
.col-6
Sonraki sütunlar devam ediyor yeni hat boyunca.
Marj Yardımcıları

V4'te flexbox'a geçişle birlikte, kardeş sütunları birbirinden uzaklaştırmak için .me-auto gibi kenar boşluğu yardımcı programlarını kullanabilirsiniz.

.col-md-4
.col-md-4 .ms-auto
.col-md-3 .ms-md-auto
.col-md-3 .ms-md-auto
.col-auto .me-auto
.col-auto
Dikey Hizalama
3 kolondan bir tanesi
3 kolondan bir tanesi
3 kolondan bir tanesi
3 kolondan bir tanesi
3 kolondan bir tanesi
3 kolondan bir tanesi
3 kolondan bir tanesi
3 kolondan bir tanesi
3 kolondan bir tanesi
3 kolondan bir tanesi
3 kolondan bir tanesi
3 kolondan bir tanesi
Kolon Kırılımları
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3

Bu belirli kesme noktalarında ile de uygulayabilirsiniz.duyarlı görüntüleme yardımcı olacaktır.

.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
Sıralama Sınıfları
DOM'da ilk olarak herhangi bir sıralama uygulanmadı
Daha büyük bir sıralamada DOM'da ikinci
DOM'da 1 sıra ile üçüncü

Ayrıca, sırasıyla order: -1 ve order: 6 uygulayarak bir öğenin sırasını değiştiren duyarlı .order-first ve .order-last sınıfları da vardır. Bu sınıflar ayrıca gerektiğinde numaralandırılmış .order-* sınıflarıyla karıştırılabilir.

DOM'da ilk olarak herhangi bir sıralama uygulanmadı
Daha büyük bir sıralamada DOM'da ikinci
DOM'da 1 sıra ile üçüncü
Bağımsız sütun sınıfları

.col-* sınıfları ayrıca bir öğeye belirli bir genişlik vermek için bir .row dışında da kullanılabilir. Sütun sınıfları bir satırın doğrudan olmayan çocukları olarak kullanıldığında, dolgular atlanır.

.col-3: 25% uzunluk
.col-sm-9: sm kesme noktasının %75'inin üzerindeki genişlik
Ofsetleme Sütunları
Ofset Sınıfları
.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3

Duyarlı kesme noktalarında sütun temizlemeye ek olarak, ofsetleri sıfırlamanız gerekebilir.

.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

Sınıflar, duyarlı yüzen resimler oluşturmak için yardımcı programlarla birlikte kullanılabilir. Metin daha kısaysa yüzen metni temizlemek için içeriği bir .clearfix sarmalayıcısına sardığınızdan emin olun.

...

Yer tutucu metin paragrafı. Bunu burada clearfix sınıfının kullanımını göstermek için kullanıyoruz. Burada sütunların yüzen görüntüyle nasıl etkileşime girdiğini göstermek için birkaç anlamsız ifade ekliyoruz.

Gördüğünüz gibi paragraflar yüzen resmin etrafını zarifçe sarıyor. Şimdi bunun, sadece uzayıp giden sıkıcı bir yer tutucu metin yerine, burada biraz gerçek içerikle nasıl görüneceğini hayal edin, ancak aslında elle tutulur bir bilgi iletmiyor. Sadece yer kaplıyor ve gerçekten okunmamalı.

Ve yine de, işte buradasın, hala bu yer tutucu metni okumaya devam ediyorsun, biraz daha fazla içgörü veya gizli bir içerik paskalya yumurtası umuyorsun. Belki bir şaka. Ne yazık ki, burada bunlardan hiçbiri yok.