Bootstrap Sütunları: Hizalama, Sıralama ve Offset Sınıfları

Sütunlar nasıl çalışır?

• Sütunlar grid'in flexbox mimarisine dayanır. Bu sayede tek bir sütunu ya da satır düzeyinde bir sütun grubunu değiştirebilir, sütunların nasıl büyüyüp küçüleceğini seçebilirsiniz.
• Tüm içerik sütunlara girer. Hiyerarşi container, row, column ve içerik sırasını izler. Belgeler içerik ile sütunu nadiren birleştirebileceğinizi ama beklenmedik sonuçlar doğabileceğini belirtir.
• Hazır sınıflar her kademe için üretilir. Altı kesme noktası ve her kademede on iki sütun için düzinelerce sınıf hazırdır; istenirse Sass üzerinden kapatılabilir.

Bu yazıdaki sınıfların çoğu aslında genel flex yardımcılarıdır; satır bir flex kapsayıcısı olduğu için onun üzerinde de çalışırlar. Aynı sınıfların grid dışındaki kullanımı Bootstrap flex yardımcıları yazısında anlatılıyor.

Dikey hizalama

Satırdaki tüm sütunlar: align-items

Satıra .align-items-start, .align-items-center veya .align-items-end eklediğinizde o satırdaki bütün sütunlar çapraz eksende (normal yönde dikeyde) üste, ortaya ya da alta yaslanır. Derlenmiş CSS'te örneğin .align-items-center kuralı align-items: center !important; şeklindedir. Hizalamanın görünmesi için satırın sütunlardan daha yüksek olması gerekir; belgelerdeki örnekte satırlara gösterim amacıyla min-height: 10rem verilmiştir.

<div class="container">
  <div class="row align-items-center" style="min-height: 10rem;">
    <div class="col">Ortada</div>
    <div class="col">Ortada</div>
    <div class="col">Ortada</div>
  </div>
</div>

Tek bir sütun: align-self

Yalnızca bir sütunun yerini değiştirmek istiyorsanız sınıfı satıra değil sütuna verin: .align-self-start, .align-self-center, .align-self-end. Diğer sütunlar satırın genel hizasında kalır. Bu sınıfların hepsinin duyarlı sürümleri vardır (.align-self-md-center gibi); 5.0.2 CSS dosyasında ayrıca hizayı varsayılana döndüren .align-self-auto da bulunur.

Yatay hizalama: justify-content

Satırdaki sütunların toplam genişliği 12'den azsa artan boşluğun nereye dağıtılacağını .justify-content-* sınıfları belirler. Belgelerdeki örnekte iki tane .col-4 sütun kullanılır; toplam 8 sütun olduğundan dört sütunluk boş alan kalır ve sınıflar bu alanı farklı biçimlerde dağıtır.

<div class="container">
  <div class="row justify-content-center">
    <div class="col-4">Bir</div>
    <div class="col-4">İki</div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">Bir</div>
    <div class="col-4">İki</div>
  </div>
</div>

Bu sınıflar da duyarlıdır. Grid belgelerindeki "değişken genişlikli içerik" örneğinde satıra .justify-content-md-center verilir; böylece sütunlar yalnızca md ve üstünde ortalanır. Sütunlar zaten 12'yi dolduruyorsa dağıtılacak boşluk kalmadığı için bu sınıfların görünür bir etkisi olmaz.

Sütun taşması ve satır kırma

12'yi aşan sütunlar

Bir satıra toplamı 12'yi geçen sütunlar koyarsanız, sığmayan sütun grubu bir bütün olarak yeni satıra geçer. Belgelerdeki örnekte .col-9 ile .col-4 toplamı 13 olduğundan dört sütunluk öğe alt satıra iner; ondan sonra gelen .col-6 de bu yeni satırda devam eder. Bunun sebebi satırın flex-wrap: wrap taşımasıdır.

İstediğiniz yerde yeni satıra geçmek: w-100

Flexbox'ta sütunları belirli bir noktada alt satıra geçirmek için belgeler küçük bir hile önerir: o noktaya width: 100% taşıyan boş bir öğe eklemek. Normalde bunu birden fazla .row ile yaparsınız, ama örneğin bir döngüyle tek satır içinde öğe üretiyorsanız bu mümkün olmayabilir. Bootstrap'te .w-100 sınıfı derlenmiş CSS'te width: 100% !important; olarak tanımlıdır.

Bu kırılmayı sadece belirli ekranlarda istiyorsanız display yardımcılarıyla birleştirin. Aşağıdaki örnekte kırıcı öğe md altında gizlidir; md ve üstünde görünür hale gelir ve dört sütunu ikişerli iki satıra böler:

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-4">A</div>
    <div class="col-6 col-sm-4">B</div>
    <!-- md ve üstünde sonraki sütunları yeni satıra geçirir -->
    <div class="w-100 d-none d-md-block"></div>
    <div class="col-6 col-sm-4">C</div>
    <div class="col-6 col-sm-4">D</div>
  </div>
</div>

Kademe kademe düşünelim: sm altında dört öğe .col-6 ile ikişer dizilir ve kırıcı gizlidir. sm aralığında öğeler .col-sm-4 olur; kırıcı hâlâ gizli olduğundan ilk satıra A, B, C sığar, D alta iner. md ve üstünde kırıcı görünür ve A ile B bir satırda, C ile D bir sonraki satırda yer alır. .d-none ve .d-md-block sınıflarının ayrıntısı Bootstrap display yardımcıları yazısında.

Yeniden sıralama: order sınıfları

.order-* sınıfları içeriğin görsel sırasını değiştirir; HTML'deki sıra aynı kalır. Bu sınıflar duyarlıdır, yani .order-1 .order-md-2 gibi kademeye göre farklı sıra verebilirsiniz. Grid belgeleri 1'den 5'e kadar değerleri anlatır; flex yardımcıları sayfası ve derlenmiş 5.0.2 CSS dosyası ayrıca .order-0 sınıfını da içerir. Bunlara ek olarak .order-first öğeye order: -1, .order-last ise order: 6 verir.

Flex öğelerinin varsayılan order değeri 0'dır. Bu yüzden sınıf almamış bir sütun, .order-1 almış bir sütunun önünde durur. Belgelerdeki örnek bunu gösterir: HTML'de birinci sıradaki sınıfsız sütun önde kalır, üçüncü sıradaki .order-1 ortaya, ikinci sıradaki .order-5 sona geçer.

En sık kullanım, mobilde ve masaüstünde farklı sıra gerektiren düzenlerdir. Örneğin bir yan menünün HTML'de içerikten sonra gelmesini, ama geniş ekranda solda görünmesini isteyebilirsiniz:

<div class="container">
  <div class="row">
    <main class="col-md-8">Ana içerik (telefonda önce)</main>
    <aside class="col-md-4 order-md-first">Yan menü (md ve üstünde solda)</aside>
  </div>
</div>

Bootstrap 4'ten geliyorsanız dikkat: geçiş rehberine göre v5 sık kullanılmayan birçok .order-* sınıfını kaldırdı ve kutudan çıktığı haliyle yalnızca 1'den 5'e kadar değerler sağlıyor. .order-12 gibi bir sınıf 5.0.2 CSS dosyasında yoktur; ihtiyacınız varsa kendi CSS'inizi yazmanız ya da Utilities API ile değer eklemeniz gerekir.

Sütunları kaydırmak: offset ve margin

Offset sınıfları

Belgeler sütunları kaydırmanın iki yolunu gösterir: sütun genişliğine göre ölçeklenen .offset-* grid sınıfları ve genişliği değişken olan hızlı düzenler için margin yardımcıları. .offset-md-4 sütunun sol margin'ini dört sütun genişliği kadar artırır. Derlenmiş CSS'te .offset-3 kuralı margin-left: 25%; şeklindedir, yani offset de 12'ye bölünmüş yüzdelerle çalışır.

<div class="container">
  <div class="row">
    <div class="col-md-4">Sol</div>
    <div class="col-md-4 offset-md-4">Dört sütun kaydırılmış</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">Ortalanmış yarım sütun</div>
  </div>
</div>

Kaynak koddaki döngü offset değerlerini 0'dan 11'e kadar üretir; satırın tamamı kadar kaydırmak mümkün olmadığı için 12 yoktur. Ön eksiz .offset-0 da üretilmez, çünkü hiçbir işe yaramaz. Ama .offset-md-0 gibi duyarlı sıfır sınıfları vardır ve daha küçük kademede verdiğiniz bir offset'i büyük ekranda sıfırlamaya yarar:

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">Birinci</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">İkinci</div>
  </div>
</div>

Bu örnekte sm aralığında iki tane 5 sütunluk öğe arasında 2 sütunluk boşluk vardır (5 + 2 + 5 = 12). md ve üstünde iki öğe de 6 sütun olur, toplam zaten 12 olduğu için offset .offset-md-0 ile kaldırılır. Sıfırlamayı unutursanız md'de 6 + 2 + 6 = 14 olur ve ikinci öğe alt satıra düşer.

Otomatik margin ile itmek

Flexbox'ta margin: auto kalan boşluğun tamamını yutar. Belgeler bu yüzden .ms-auto ve .me-auto gibi margin yardımcılarının kardeş sütunları birbirinden uzaklaştırmak için kullanılabileceğini gösterir. .ms-auto derlenmiş CSS'te margin-left: auto !important; olarak tanımlıdır.

<div class="container">
  <div class="row">
    <div class="col-auto me-auto">Logo</div>
    <div class="col-auto">Giriş yap</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">Sağa itilen</div>
    <div class="col-md-3 ms-md-auto">Sağa itilen</div>
  </div>
</div>

Offset ile margin arasındaki fark şudur: offset tam olarak N sütun kaydırır ve diğer sütunlarla aynı ölçeğe oturur; auto margin ise ne kadar boşluk kalmışsa onu kullanır. Bir sütunu her ekranda tam sağa yaslamak için .ms-auto, düzenli bir ızgara hizası için offset daha uygundur. Margin sınıflarının adlandırması (ms, me, kademe ve boyut) Bootstrap margin ve padding sınıfları yazısında anlatılıyor.

Satır dışında sütun sınıfı kullanmak

.col-* sınıfları bir .row dışında da kullanılabilir ve öğeye belirli bir genişlik verir. Belgelere göre sütun sınıfları satırın doğrudan çocuğu olmadığında padding uygulanmaz; çünkü gutter padding'i .row > * kuralından gelir. Örneğin satır dışındaki bir .col-3 öğesi yüzde 25 genişlik alır, .col-sm-9 ise sm ve üstünde yüzde 75 olur.

Belgeler bu kullanımı float yardımcılarıyla birleştirerek duyarlı, metnin etrafına yerleşen bir görsel kurmayı da gösterir. Görsele .col-md-6 .float-md-end .mb-3 .ms-md-3 verilir; md ve üstünde yarım genişlikte sağa yaslanır, paragraflar etrafından akar. Metin görselden kısa kalırsa kapsayıcının yüksekliği çökmesin diye her şey .clearfix içine alınır:

<div class="clearfix">
  <img src="kapak.jpg" class="col-md-6 float-md-end mb-3 ms-md-3" alt="Kapak görseli">
  <p>Paragraf metni görselin etrafından akar.</p>
  <p>İkinci paragraf.</p>
</div>

Float ve clearfix sınıflarının ayrıntısı Bootstrap boyut, overflow ve float yazısında, duyarlı görsel sınıfları ise Bootstrap img-fluid ve ratio yazısında.

Hepsi bir arada: küçük bir düzen örneği

Şimdi öğrendiklerimizi bir blog sayfası başlığında birleştirelim. Amaç şu: telefonda önce makale başlığı, altında yazar bilgisi görünsün; lg ve üstünde yazar bilgisi solda dar bir sütunda, başlık sağda geniş bir sütunda dursun ve iki sütun dikeyde ortalansın. Ayrıca en geniş ekranlarda bütün blok biraz içeriden başlasın.

<div class="container">
  <div class="row align-items-lg-center">
    <div class="col-lg-7 offset-xl-1">
      <h1>Makale başlığı</h1>
    </div>
    <div class="col-lg-3 order-lg-first">
      <p>Yazar adı ve tarih</p>
    </div>
  </div>
</div>

Bu kodu kademelere göre okuyalım. lg altında iki sütun da tam genişliktedir ve HTML sırasıyla alt alta dizilir; başlık önce gelir. lg ve üstünde yazar sütunu .order-lg-first sayesinde sola geçer, başlık 7, yazar 3 sütun kaplar ve satıra verilen .align-items-lg-center ikisini dikeyde ortalar. xl ve üstünde başlık sütununa eklenen .offset-xl-1 bir sütunluk boşluk açar; toplam 3 + 1 + 7 = 11 olduğundan her şey tek satıra sığar. Offset, order sınıfından bağımsız olarak öğenin kendi sol margin'ine uygulandığı için boşluk yazar sütunu ile başlık arasında oluşur.

Sık yapılan hatalar

• Hizalama sınıfını yanlış öğeye vermek: .align-items-* ve .justify-content-* satıra, .align-self-*, .order-* ve .offset-* sütuna yazılır. Sütuna .justify-content-center vermek o sütunun içindekileri etkilemez, çünkü sütun bir flex kapsayıcısı değildir; içerideki öğeleri hizalamak için sütuna ayrıca .d-flex vermeniz gerekir.
• Yüksekliği olmayan satırda dikey hizalama beklemek: Sütunlar satırla aynı yükseklikteyse hizalanacak alan yoktur. Satıra bir yükseklik verin ya da sütunlardan biri daha uzun olsun.
• Offset'i büyük ekranda sıfırlamamak: Küçük kademede verdiğiniz offset büyük kademelere de geçer. Toplam 12'yi aşarsa sütun alt satıra düşer; .offset-md-0 gibi bir sınıfla sıfırlayın.
• v4 sınıf adlarını kullanmak: .ml-auto ve .mr-auto v5'te .ms-auto ve .me-auto oldu; eski adlar 5.0.2 CSS dosyasında yoktur. Tüm yeniden adlandırmalar Bootstrap 4'ten 5'e geçiş yazısında.
• order ile anlamı değiştirmek: Görsel sıra ile HTML sırası çok farklılaşırsa klavye ile gezen kullanıcılar karışık bir sırayla karşılaşabilir. order sınıflarını düzen için kullanın, anlam için değil.

Sık Sorulan Sorular

Bir sütunu yatayda nasıl ortalarım?

Satıra .justify-content-center verin ya da sütuna .offset-* ile eşit kaydırma uygulayın. Örneğin .col-md-6 .offset-md-3 yarım genişlikteki bir sütunu md ve üstünde ortalar (3 + 6 + 3 = 12).

Sütunun içindeki içeriği dikeyde nasıl ortalarım?

Satır sınıfları sütunların kendisini hizalar. Sütunun içindeki öğeleri ortalamak için sütuna .d-flex ve .align-items-center verin; sütun böylece kendi içeriği için bir flex kapsayıcısı olur.

order ve offset sınıfları hangi kademelerde var?

İkisi de altı kademenin hepsinde vardır: .order-lg-last, .offset-xl-2 gibi. Offset için değerler 0 ile 11, order için 0 ile 5 arasıdır; bunlara first ve last eklenir.

Sütunlar arasındaki boşluğu nasıl değiştiririm?

Boşluk sütunların padding'inden gelir ve .g-*, .gx-*, .gy-* sınıflarıyla değiştirilir. Bu konu Bootstrap gutter sınıfları yazısında ayrıntılı olarak anlatılıyor.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Bootstrap öğrenme rehberi · Bootstrap grid sistemi · Gutter sınıfları · Flex yardımcıları · Display yardımcıları · CSS flexbox rehberi