Bootstrap form layout: grid, yatay form ve satır içi form

Başlangıç noktası: form öğesi ve dikey düzen

Belgeler her alan grubunun bir <form> öğesi içinde durmasını önerir. Bootstrap <form> öğesine hiçbir varsayılan stil vermez; ancak tarayıcı formları kendiliğinden güçlü davranışlarla gelir. Belgelerin hatırlattığı bir ayrıntı özellikle önemli: form içindeki <button> öğeleri varsayılan olarak type="submit" sayılır, bu yüzden her butona türünü açıkça yazın. Aksi hâlde bir giriş grubundaki "Temizle" butonu formu gönderebilir.

Bootstrap neredeyse tüm form kontrollerine display: block ve width: 100% verdiği için alanlar ek bir şey yapmadan alt alta dizilir. Bu dikey düzende gruplamayı margin yardımcı sınıfları yapar. Belgeler alt margin sınıflarını ve form boyunca tek bir yönü kullanmayı önerir; yani bir alanda .mb-3, ötekinde .mt-3 kullanmak yerine hep .mb-3 kullanın. Sarmalayıcı olarak <div>, <fieldset> ya da neredeyse istediğiniz herhangi bir öğe olabilir.

<form>
  <div class="mb-3">
    <label for="adSoyad" class="form-label">Ad soyad</label>
    <input type="text" class="form-control" id="adSoyad" placeholder="Ayşe Yılmaz">
  </div>
  <div class="mb-3">
    <label for="telefon" class="form-label">Telefon</label>
    <input type="tel" class="form-control" id="telefon" placeholder="05xx xxx xx xx">
  </div>
  <button type="submit" class="btn btn-primary">Gönder</button>
</form>

Bootstrap 4'te bu sarmalayıcı için .form-group kullanılırdı. v5.0.2 derlenmiş CSS dosyasında bu sınıf yoktur; aynı boşluğu .mb-3 verir. Boşluk ölçeğinin tamamı margin ve padding sınıfları yazısında.

Form grid: alanları yan yana dizmek

Birden çok sütun, farklı genişlikler ya da hizalama gerektiren formlar için grid sınıflarını kullanırsınız. Belgelerin not düştüğü bir koşul var: bu sınıflar $enable-grid-classes Sass değişkeninin açık olmasını gerektirir. Değişken varsayılan olarak açıktır; yalnızca kendi derlemenizde kapattıysanız sorun çıkar. En basit örnekte iki .col satırı eşit ikiye böler. Gutter sınıfları (.g-3 gibi) hem yatay hem dikey aralığı ayarlar; bu sınıflar da aynı Sass değişkenine bağlıdır.

<div class="row g-3">
  <div class="col">
    <input type="text" class="form-control" placeholder="Ad" aria-label="Ad">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Soyad" aria-label="Soyad">
  </div>
</div>

Derlenmiş CSS bu düzenin nasıl kurulduğunu gösterir: .row bir flex kabıdır ve --bs-gutter-x değişkenini varsayılan olarak 1.5rem yapar; .g-3 bu değişkeni ve dikey karşılığı --bs-gutter-y değerini 1rem olarak ayarlar. .row doğrudan çocuklarına width: 100% verir, .col ise flex: 1 0 0% ile kalan alanı eşit paylaştırır. Gutter, sütunlara iç boşluk ve satıra negatif margin olarak uygulanır; dikey gutter da sütunların margin-top değerinden gelir. Bu sayede alt satıra kayan alanlar arasında da boşluk kalır.

Mini örnek: adres formu

Gerçek bir formda alanların genişlikleri farklıdır. Aşağıdaki örnek belgelerdeki karmaşık grid örneğinin ve resmî Checkout şablonunun düzenini Türkçe bir fatura formuna uyarlar. Formun kendisi .row g-3 sınıflarını alır, her alan bir sütundur.

<form class="row g-3">
  <div class="col-md-6">
    <label for="faturaAd" class="form-label">Ad</label>
    <input type="text" class="form-control" id="faturaAd">
  </div>
  <div class="col-md-6">
    <label for="faturaSoyad" class="form-label">Soyad</label>
    <input type="text" class="form-control" id="faturaSoyad">
  </div>
  <div class="col-12">
    <label for="faturaAdres" class="form-label">Adres</label>
    <input type="text" class="form-control" id="faturaAdres" placeholder="Mahalle, cadde, numara">
  </div>
  <div class="col-md-5">
    <label for="faturaIl" class="form-label">İl</label>
    <select id="faturaIl" class="form-select">
      <option selected>Seçin...</option>
      <option>Ankara</option>
    </select>
  </div>
  <div class="col-md-4">
    <label for="faturaIlce" class="form-label">İlçe</label>
    <input type="text" class="form-control" id="faturaIlce">
  </div>
  <div class="col-md-3">
    <label for="faturaPosta" class="form-label">Posta kodu</label>
    <input type="text" class="form-control" id="faturaPosta">
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="teslimatAyni">
      <label class="form-check-label" for="teslimatAyni">Teslimat adresi aynı</label>
    </div>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Devam et</button>
  </div>
</form>

Bu formu okurken sütun sınıflarının mobil öncelikli olduğunu hatırlayın. .col-md-6 ve benzerleri yalnızca orta kademe ve üstünde etkilidir; daha dar ekranlarda .row çocuklara width: 100% verdiği için her alan tam genişlikte alt alta durur. Orta ve üstü ekranlarda ilk satırda ad ve soyad yarı yarıya, adres tam genişlikte, son satırda il, ilçe ve posta kodu 5, 4 ve 3 birimlik sütunlarla toplam 12 birimi doldurur. Kademe sınırları breakpoint yazısında.

Yatay form: etiket ve alan aynı satırda

Yatay formda her alan grubuna .row verir, etiketin ve alanın genişliğini .col-*-* sınıflarıyla belirlersiniz. Belgeler etiketlere .col-form-label eklemenizi ister; bu sınıf etiketi ilgili alanla dikeyde ortalar. Derlenmiş CSS'e bakınca nasıl yaptığını görürsünüz: padding-top ve padding-bottom değeri calc(0.375rem + 1px), yani alanın iç boşluğu artı kenarlık kalınlığıdır; margin-bottom sıfırlanır ve satır yüksekliği 1.5 olur. Etiket metni böylece alanın içindeki metinle aynı taban çizgisine oturur.

<form>
  <div class="row mb-3">
    <label for="yatayEposta" class="col-sm-2 col-form-label">E-posta</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="yatayEposta">
    </div>
  </div>
  <fieldset class="row mb-3">
    <legend class="col-form-label col-sm-2 pt-0">Hesap türü</legend>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="hesapTuru" id="bireysel" value="bireysel" checked>
        <label class="form-check-label" for="bireysel">Bireysel</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="hesapTuru" id="kurumsal" value="kurumsal">
        <label class="form-check-label" for="kurumsal">Kurumsal</label>
      </div>
    </div>
  </fieldset>
  <div class="row mb-3">
    <div class="col-sm-10 offset-sm-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="yatayKosul">
        <label class="form-check-label" for="yatayKosul">Koşulları kabul ediyorum</label>
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Kaydol</button>
</form>

Örnekte üç ayrıntı belgelerden geliyor. Radyo grubu bir <fieldset> içinde, grubun başlığı <legend> ile verilmiş ve legend de .col-form-label alarak etiket sütunu olmuş. Legend'a eklenen .pt-0 üst boşluğu kaldırır; belgeler bazen kusursuz hizalama için margin ya da padding yardımcılarına başvurmanız gerektiğini söyler ve alt alta radyoların etiket hizasını bu şekilde düzeltir. Etiketi olmayan onay kutusu ise .offset-sm-2 ile etiket sütununun genişliği kadar sağa itilmiş; böylece alanlarla aynı hizaya gelir. .col-sm-2 ve .col-sm-10 küçük kademe ve üstünde etkilidir, daha dar ekranda etiket ve alan yine alt alta durur.

Yatay formda etiket boyutu

Alanları .form-control-lg veya .form-control-sm ile büyütüp küçülttüğünüzde etiketin de aynı ölçüye geçmesi gerekir; yoksa dikey ortalama bozulur. Bunun için <label> ya da <legend> öğesine .col-form-label-lg veya .col-form-label-sm ekleyin. Derlenmiş CSS'te büyük etiket calc(0.5rem + 1px) dikey boşluk ve 1.25rem yazı boyutu, küçük etiket calc(0.25rem + 1px) ve 0.875rem kullanır; bu değerler büyük ve küçük alanların iç boşluk ve yazı boyutuyla birebir eşleşir.

<div class="row mb-3">
  <label for="kucukAlan" class="col-sm-2 col-form-label col-form-label-sm">Kod</label>
  <div class="col-sm-10">
    <input type="text" class="form-control form-control-sm" id="kucukAlan" placeholder="Küçük alan">
  </div>
</div>
<div class="row">
  <label for="buyukAlan" class="col-sm-2 col-form-label col-form-label-lg">Başlık</label>
  <div class="col-sm-10">
    <input type="text" class="form-control form-control-lg" id="buyukAlan" placeholder="Büyük alan">
  </div>
</div>

Sütun genişliği ve otomatik boyut

Bir satıra istediğiniz kadar .col koyabilirsiniz ve bunlar genişliği eşit paylaşır. Bazı sütunlara .col-sm-7 gibi belirli bir genişlik verirseniz kalan .col sütunları geri kalan alanı eşit böler. Örneğin şehir alanı yedi birim alırken il ve posta kodu kalan beş birimi paylaşır.

Sütunun yalnızca içeriği kadar yer kaplamasını istiyorsanız .col yerine .col-auto kullanın; derlenmiş CSS bu sınıfa flex: 0 0 auto ve width: auto verir. Belgelerdeki otomatik boyut örneği forma .align-items-center ekler; bu flex yardımcısı sütunları dikeyde ortalar, böylece farklı yükseklikteki alanlar, onay kutusu ve buton aynı orta çizgide durur. Görünür etiketi olmayan alanlar için etiketler .visually-hidden ile gizlenmiş ama sayfada bırakılmıştır.

<form class="row gy-2 gx-3 align-items-center">
  <div class="col-auto">
    <label class="visually-hidden" for="otoAd">Ad</label>
    <input type="text" class="form-control" id="otoAd" placeholder="Ayşe Yılmaz">
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="otoKullanici">Kullanıcı adı</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="otoKullanici" placeholder="Kullanıcı adı">
    </div>
  </div>
  <div class="col-auto">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="otoHatirla">
      <label class="form-check-label" for="otoHatirla">Beni hatırla</label>
    </div>
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">Giriş</button>
  </div>
</form>

Burada .gy-2 ve .gx-3 dikey ve yatay aralığı ayrı ayrı ayarlar. Belgeler bu örneği daha sonra kademe sınıflarıyla yeniden karıştırır: ilk üç sütun .col-sm-3, son ikisi .col-auto olur. Yardımcı sınıfların ayrıntısı flex yardımcı sınıfları ve visually-hidden yazılarında.

Satır içi form

Arama çubuğu ya da bülten kaydı gibi tek satırlık formlar için belgeler .row-cols-* sınıflarını önerir. Fikir şudur: forma .row row-cols-lg-auto g-3 align-items-center verilir, her öğe .col-12 sütunu içinde durur. Dar mobil ekranlarda .col-12 öğeleri alt alta dizer, geniş ekranda .row-cols-lg-auto her sütunu içeriği kadar daraltarak tek satıra almayı hedefler; .align-items-center da onay kutusunun diğer öğelerle ortalanmasını sağlar.

<form class="row row-cols-lg-auto g-3 align-items-center">
  <div class="col-12 col-lg-auto">
    <label class="visually-hidden" for="bultenEposta">E-posta</label>
    <input type="email" class="form-control" id="bultenEposta" placeholder="E-posta adresiniz">
  </div>
  <div class="col-12 col-lg-auto">
    <label class="visually-hidden" for="bultenKonu">Konu</label>
    <select class="form-select" id="bultenKonu">
      <option selected>Konu seçin...</option>
      <option value="1">Duyurular</option>
      <option value="2">Kampanyalar</option>
    </select>
  </div>
  <div class="col-12 col-lg-auto">
    <button type="submit" class="btn btn-primary">Abone ol</button>
  </div>
</form>

Bootstrap 4'teki .form-inline sınıfının v5'te kaldırıldığını unutmayın; satır içi düzen artık yalnızca grid ve yardımcı sınıflarla kurulur. Yardım metnini alanın yanına koymak gerektiğinde de aynı mantık geçerlidir: etiket, alan ve <span class="form-text"> ayrı .col-auto sütunlarına konur ve satıra .align-items-center verilir.

Yardım metnini alanın yanına koymak

Bazen kısa bir kuralı, örneğin parola uzunluğunu, alanın altına değil yanına yazmak istersiniz. Belgelerdeki örnek bunun için etiket, alan ve yardım metnini üç ayrı .col-auto sütununa koyar ve satıra .align-items-center verir. Yardım metni satır içi bir <span> olduğu için .form-text ona üst margin eklemez; v5'te bu sınıf kendi display değerini atamadığından öğenin türü görünümünü belirler.

<div class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="satirParola" class="col-form-label">Parola</label>
  </div>
  <div class="col-auto">
    <input type="password" id="satirParola" class="form-control" aria-describedby="satirParolaYardim">
  </div>
  <div class="col-auto">
    <span id="satirParolaYardim" class="form-text">8 ile 20 karakter arası olmalı.</span>
  </div>
</div>

Etiket burada da .col-form-label alır, çünkü alanla aynı satırdadır ve dikey boşluğu alanın boşluğuyla eşleşmelidir. Yardım metni aria-describedby ile alana bağlıdır; düzen değişse de bu bağ korunur. Dar ekranda üç sütun içerikleri kadar yer kapladığı için sığmadıkları noktada alt satıra kayar.

Hangi düzen ne zaman?

Seçim yaparken mobil öncelikli düşünün: belgelerdeki örneklerin hepsi dar ekranda alt alta dizilen bir düzenle başlar ve yan yana yerleşimi yalnızca belirli bir kademeden sonra açar. Yatay formu dar ekranda zorla yan yana tutmak etiketleri sıkıştırır; bu yüzden etiket sütunlarına .col-2 yerine .col-sm-2 gibi kademeli bir sınıf verilir. Tek bir sayfada birden fazla düzen de kullanabilirsiniz; örneğin Checkout şablonu ana formu çok sütunlu grid ile, yan taraftaki indirim kodu kutusunu tek satırlık bir giriş grubuyla kurar.

Sık yapılan hatalar

• v4 düzen sınıflarını kullanmak: .form-group, .form-row ve .form-inline v5.0.2 CSS dosyasında tanımlı değildir; sayfa hata vermez ama düzen oluşmaz.
• Sütunu row dışına koymak: .col-* sınıfları .row içinde anlam kazanır; satır olmadan gutter ve flex davranışı kurulmaz.
• Yatay formda col-form-label unutmak: Etiket alanın üst kenarına yapışık görünür ve metinler aynı hizaya gelmez.
• Boyutları eşleştirmemek: .form-control-lg alanın etiketi .col-form-label-lg almazsa dikey ortalama kayar.
• Buton türünü yazmamak: Form içindeki her buton varsayılan olarak gönderme butonudur.
• Gizli etiketi tamamen silmek: Görünür etiket istemiyorsanız <label class="visually-hidden"> kullanın; etiketi kaldırmak alanın adını da kaldırır.

Sık Sorulan Sorular

Bootstrap 5 form-group yerine ne kullanılır?

Alanları saran bir <div> ve ona verilen .mb-3 gibi bir margin sınıfı. Yan yana alanlar için .row ve sütun sınıfları kullanılır.

Yatay formda etiket neden alanla hizalı değil?

Etikete .col-form-label verilmemiştir ya da alan boyutu değiştirilip etikete .col-form-label-lg veya -sm eklenmemiştir.

Formun tamamını tek satıra nasıl alırım?

Forma .row, bir .row-cols-*-auto sınıfı, gutter ve .align-items-center verin; öğeleri sütunlara koyun. Her öğenin içeriği kadar yer kaplaması için .col-auto da kullanabilirsiniz.

Formu sayfanın ortasında dar bir sütunda nasıl gösteririm?

Formu bir .row içindeki tek bir sütuna koyun, örneğin .col-md-6, ve satıra .justify-content-center ekleyin. Bu flex yardımcısı sütunu yatayda ortalar; orta kademenin altındaki ekranlarda sütun zaten tam genişliktedir. Form içindeki alanlar her zaman bulundukları sütunun genişliğini doldurduğu için ayrıca genişlik vermeniz gerekmez. Sütunun dar ekranlarda da daralmasını isterseniz .col-sm-8 gibi daha küçük bir kademeden başlayan bir sınıf ekleyebilirsiniz.

Grid sınıfları formda çalışmıyorsa ne kontrol edilmeli?

Kendi Sass derlemenizde $enable-grid-classes değişkeninin kapatılıp kapatılmadığını ve sütunların bir .row içinde olup olmadığını kontrol edin. Diğer olası nedenler Bootstrap çalışmıyor yazısında.

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 · Grid sistemi · Gutter boşlukları · Form control · Input group · Form doğrulama