Bootstrap Spacing Sınıfları: m-*, p-*, mx-auto ve gap-*

Adlandırma kuralı

Belgelere göre tüm kesme noktalarında (xs'ten xxl'ye) geçerli olan spacing sınıflarının adında kademe kısaltması yoktur, çünkü bu sınıflar min-width: 0 ve üstüne uygulanır ve bir medya sorgusuna bağlı değildir. Diğer kademelerin sınıflarında ise kısaltma bulunur. Dolayısıyla iki biçim vardır: xs için {özellik}{kenar}-{boyut}, sm, md, lg, xl ve xxl için {özellik}{kenar}-{kademe}-{boyut}.

Birkaç örnek okuyalım: .m-0 dört kenardaki margin'i sıfırlar. .pt-4 üst padding'i 1.5rem yapar. .ms-1 başlangıç tarafına 0.25rem margin verir. .py-lg-5 lg ve üstünde üst ve alt padding'i 3rem yapar. .me-md-auto md ve üstünde bitiş tarafındaki margin'i auto yapar.

s ve e harfleri Bootstrap 5'in mantıksal yön yaklaşımından gelir. Geçiş rehberine göre RTL desteğiyle birlikte .ml-* ve .mr-* sınıfları .ms-* ve .me-*, .pl-* ve .pr-* sınıfları ise .ps-* ve .pe-* olarak yeniden adlandırıldı. Eski adlar 5.0.2 CSS dosyasında yoktur; Bootstrap 4 kodu taşıyorsanız bunları aramanız gerekir (bkz. Bootstrap 4'ten 5'e geçiş).

Boyut ölçeği

Sınıflar $spacers adlı Sass haritasından üretilir ve $spacer temel değeri varsayılan olarak 1rem'dir. Belgeler ölçeğin .25rem ile 3rem arasında olduğunu belirtir. Piksel karşılıkları kök yazı boyutu 16px iken verilmiştir:

Ölçekte 6 yoktur: .m-6 ya da .p-6 diye bir sınıf 5.0.2 CSS dosyasında bulunmaz. auto yalnızca margin sınıflarında vardır, çünkü kaynak kodda margin değerleri map-merge($spacers, (auto: auto)) ile oluşturulurken padding değerleri doğrudan $spacers kullanır; .p-auto sınıfı üretilmez.

Derlenmiş CSS'te spacing sınıfları

Her spacing sınıfı tek bir özellik-değer çiftidir ve !important taşır. Bootstrap 5.0.2 derlenmiş CSS dosyasında birkaç örnek sınıf şöyle tanımlıdır:

.mt-3 {
  margin-top: 1rem !important;
}

.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

.ms-1 {
  margin-left: 0.25rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.px-4 {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}

!important sayesinde bu sınıflar bileşenlerin kendi margin ve padding değerlerini ezer. Örneğin bir başlığın alt boşluğunu kaldırmak için .mb-0 vermek, Reboot'un başlıklara verdiği margin-bottom: 0.5rem değerini ezerek çalışır. Bu davranış _variables.scss dosyasındaki $enable-important-utilities değişkenine bağlıdır ve varsayılan değeri true'dur. Ters yönde bir sonuç da var: bir spacing sınıfının değerini kendi CSS'inizden !important kullanmadan ezemezsiniz; böyle bir ihtiyaç çoğu zaman yanlış sınıfın seçildiğine işaret eder. Yardımcı sınıf yaklaşımının genel mantığı için Bootstrap nedir yazısına bakın.

Duyarlı spacing

Spacing sınıflarının hepsi duyarlıdır ve mobile-first çalışır. Önce en küçük ekran için değeri yazar, sonra büyüyen ekranlarda değiştirmek istediğiniz kademeyi eklersiniz. Resmî navbar örneklerinde sık görülen .mb-2 .mb-md-0 kalıbı buna iyi bir örnektir: menü telefonda alt alta açıldığında altında biraz boşluk bırakır, md ve üstünde yatay hale geldiğinde bu boşluk kaldırılır.

<section class="p-3 p-md-5 mb-4 bg-light">
  <h2 class="mb-2 mb-md-3">Hizmetlerimiz</h2>
  <p class="mb-0">Telefonda daha sıkı, geniş ekranda daha ferah bir bölüm.</p>
</section>

Bu örnekte bölüm telefonda 1rem, md ve üstünde 3rem iç boşluk alır. Başlığın alt boşluğu 0.5rem'den 1rem'e çıkar. Paragrafın alt margin'i her ekranda sıfırdır; böylece bölümün alt kenarında paragraf margin'i ile padding üst üste binmez. Hangi kademenin hangi genişlikte başladığını Bootstrap breakpoint yazısında bulabilirsiniz.

Yatay ortalama: mx-auto

.mx-auto sağ ve sol margin'i auto yapar. Belgelere göre bu sınıf display: block olan ve bir width değeri bulunan sabit genişlikli blok içeriği yatayda ortalamak içindir. Genişlik verilmemiş bir blok öğe zaten satırın tamamını kapladığı için ortalanacak bir şey kalmaz; satır içi bir öğede (span, a) ise yatay auto margin etkisizdir.

<div class="mx-auto" style="width: 200px;">
  Ortalanmış blok
</div>

<div class="col-6 mx-auto">
  Yarım genişlikte, ortalanmış blok
</div>

İkinci satırdaki kullanım belgelerdeki butonlar sayfasından gelir: .col-6 satır dışında kullanıldığında öğeye yüzde 50 genişlik verir, .mx-auto da onu ortalar. Metni ortalamak istiyorsanız margin değil .text-center gerekir; bu sınıf Bootstrap text sınıfları yazısında. Flex kapsayıcısı içinde öğeleri ortalamak için ise flex yardımcıları daha uygundur.

Negatif margin

CSS'te margin negatif değer alabilir, padding alamaz. Bootstrap 5.0 negatif margin yardımcılarını içerir, ama belgelerin vurguladığı gibi bunlar varsayılan olarak kapalıdır. Geçiş rehberi de bunu v5'teki kırıcı değişiklikler arasında sayar. Açmak için Sass'ta $enable-negative-margins: true ayarlayıp Bootstrap'i kendiniz derlemeniz gerekir; hazır CDN dosyasında .mt-n1 gibi sınıflar yoktur.

Açıldığında sözdizimi pozitif sınıflarla neredeyse aynıdır, yalnızca boyuttan önce bir n harfi gelir. Kaynakta $negative-spacers değişkeni negativify-map($spacers) fonksiyonuyla üretilir; fonksiyonun açıklamasına göre anahtarların önüne n ekler ve değerleri negatife çevirir. Belgelerdeki örnek, .mt-1 sınıfının tersi olan sınıfı şöyle gösterir:

// Önce (Bootstrap değişkenlerinden önce) seçeneği açın:
$enable-negative-margins: true;

// Derlemeden sonra belgelerdeki örneğe göre şu sınıf üretilir:
// .mt-n1 { margin-top: -0.25rem !important; }

.mt-n0 ya da .mt-nauto diye bir sınıf beklemeyin: negativify-map fonksiyonu 0 anahtarını bilerek atlar, auto ise $spacers haritasında hiç bulunmadığı için negatif haritaya da girmez. Diğer $enable-* seçenekleri Bootstrap enable seçenekleri yazısında, Sass ile derleme düzeni ise Bootstrap Sass ile özelleştirme yazısında anlatılıyor.

Gap yardımcıları

Belgeler, display: grid kullanan bir kapsayıcıda tek tek öğelere margin vermek yerine kapsayıcıya .gap-* vermenizi önerir. Gap yardımcıları duyarlıdır, utilities API ile $spacers haritasından üretilir ve 0 ile 5 arasındaki altı boyutu destekler. .gap-auto yoktur; belgeler bunun pratikte .gap-0 ile aynı olduğunu belirtir. Geçiş rehberi de gap yardımcılarını CSS Grid ve flexbox düzenleri için eklenen yeni yardımcılar arasında sayar.

<div class="d-grid gap-3">
  <div class="p-2 bg-light border">Öğe 1</div>
  <div class="p-2 bg-light border">Öğe 2</div>
  <div class="p-2 bg-light border">Öğe 3</div>
</div>

Bu kalıbın en bilinen kullanımı tam genişlikli butonlardır. Geçiş rehberine göre Bootstrap 4'teki .btn-block kaldırıldı; yerine butonları .d-grid ve bir .gap-* sınıfı taşıyan bir kapsayıcıya almanız önerilir. Butonlar sayfasındaki duyarlı örnekte .d-grid .gap-2 .d-md-block kullanılır: md altında butonlar alt alta ve aralarında boşlukla durur, md ve üstünde .d-md-block grid düzenini kaldırdığı için gap etkisini yitirir.

<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Kaydet</button>
  <button class="btn btn-secondary" type="button">Vazgeç</button>
</div>

Butonların kendisi için Bootstrap buton sınıfları yazısına, display sınıfları için Bootstrap display yardımcıları yazısına bakabilirsiniz.

Uygulama: bir duyuru kutusunu yalnızca sınıflarla düzenlemek

Aşağıdaki örnek bir duyuru kutusunu tek satır CSS yazmadan kurar. Amaç: kutunun içinde rahat bir iç boşluk, başlık ile metin arasında küçük bir aralık, altta iki buton ve kutunun sayfadaki diğer bölümlerden ayrılması.

<div class="container my-4 my-lg-5">
  <div class="p-3 p-md-4 border bg-light">
    <h3 class="mb-1">Bakım duyurusu</h3>
    <p class="mb-3">Pazar gecesi kısa bir bakım çalışması yapılacaktır.</p>
    <div class="d-flex gap-2">
      <a class="btn btn-primary" href="#">Ayrıntılar</a>
      <button class="btn btn-outline-secondary" type="button">Kapat</button>
    </div>
  </div>
</div>

Sınıfları sırayla okuyalım. .my-4 .my-lg-5 container'ın üstüne ve altına telefonda 1.5rem, lg ve üstünde 3rem dış boşluk verir. Kutudaki .p-3 .p-md-4 iç boşluğu md'den itibaren büyütür; kenarlık ve zemin padding'in dışında kaldığı için boşluk kutunun içinde görünür. Başlığın .mb-1 sınıfı Reboot'un başlık margin'ini 0.25rem'e indirir, paragrafın .mb-3 sınıfı butonlarla arasına 1rem koyar. Butonlar arasındaki boşluğu ise her butona margin vermek yerine kapsayıcıdaki .gap-2 sağlar. Buradaki temel kural şudur: zemin ya da kenarlık taşıyan bir kutunun içindeki boşluk için padding, kutuyu komşularından ayırmak için margin kullanın.

Ölçeği Sass ile genişletmek

Belgeler daha fazla boyut eklemek için $spacers haritasına yeni girdiler eklemenizi söyler. Spacing yardımcıları _utilities.scss dosyasında utilities API ile tanımlıdır; örneğin margin yardımcısının kaynak tanımı şöyledir:

// scss/_utilities.scss (v5.0.2, kısaltıldı)
"margin": (
  responsive: true,
  property: margin,
  class: m,
  values: map-merge($spacers, (auto: auto))
),
"padding": (
  responsive: true,
  property: padding,
  class: p,
  values: $spacers
),

responsive: true her kademe için sınıf üretildiğini, class: m sınıf önekini, values ise kullanılacak haritayı belirtir. $spacers haritasına eklediğiniz bir anahtar bu nedenle margin, padding ve gap sınıflarının hepsine yansır. API'nin diğer seçenekleri ve kendi yardımcınızı yazmak için Bootstrap Utilities API yazısına bakın.

Sık yapılan hatalar

• Bootstrap 4 sınıf adları: .ml-3, .mr-auto, .pl-2 v5'te çalışmaz; .ms-3, .me-auto, .ps-2 kullanın.
• Ölçekte olmayan değer: .mt-6, .p-auto ya da .mb-10 gibi sınıflar yoktur. Ek değer gerekiyorsa haritayı genişletin.
• Negatif margin'i hazır dosyada beklemek: .mt-n2 yalnızca $enable-negative-margins açıkken derlenen dosyada bulunur.
• Satır içi öğede mx-auto: Ortalama için öğenin blok olması ve bir genişliği olması gerekir.
• Grid sütunlarına margin ile boşluk vermek: Sütunlar yüzde genişlikle hesaplandığı için yatay margin eklemek toplamı bozar ve sütunları alt satıra itebilir. Sütun aralarındaki boşluk için gutter sınıflarını kullanın.
• Kademe sırasını ters düşünmek: .mb-md-0 md ve üstünde geçerlidir, md altında değil. Yalnızca mobilde boşluk istiyorsanız önce ön eksiz sınıfı yazın, sonra büyük kademede sıfırlayın.

Sık Sorulan Sorular

Bootstrap'te mt-3 kaç piksel?

.mt-3 margin-top: 1rem verir; kök yazı boyutu 16px iken bu 16px'e karşılık gelir.

ms ve me neden sol ve sağ yerine kullanılıyor?

s başlangıç, e bitiş anlamına gelir. Soldan sağa yazılan sayfalarda başlangıç sol, bitiş sağdır; sağdan sola sayfalarda tersine döner. RTL kurulumu Bootstrap kurulum yazısında kısaca anlatılıyor.

gap ile margin arasında hangisini seçmeliyim?

Öğeler bir grid ya da flex kapsayıcısının çocuklarıysa kapsayıcıya tek bir .gap-* vermek daha temizdir ve son öğenin sonunda fazladan boşluk bırakmaz. Bağımsız öğeler arasında ise margin sınıflarını kullanın.

mt-0 ekledim ama üstteki boşluk hâlâ duruyor, neden?

Boşluk büyük ihtimalle üstteki öğenin alt margin'inden geliyor. Reboot paragraflara margin-top: 0 ve margin-bottom: 1rem, başlıklara margin-bottom: 0.5rem verir; yani iki paragraf arasındaki boşluk alttakinin üst margin'i değil, üsttekinin alt margin'idir. Bu durumda .mb-0 sınıfını üstteki öğeye verin. Reboot'un diğer varsayılanları Bootstrap Reboot ve tipografi yazısında.

Spacing sınıflarını Bootstrap'in tamamını yüklemeden kullanabilir miyim?

Evet. Dağıtım paketindeki bootstrap-utilities.css dosyası (ve .min ile .rtl sürümleri) belgelerdeki dosya tablosuna göre yalnızca yardımcı sınıfları içerir; düzen, içerik ve bileşen stilleri yoktur. Hangi dosyanın neyi içerdiği Bootstrap kurulum yazısında anlatılıyor. Yalnızca birkaç yardımcıya ihtiyacınız varsa Sass ile sadece gereken parçaları derlemek de bir seçenektir.

Kendi boşluk değerimi nasıl eklerim?

$spacers haritasına yeni bir anahtar ekleyip Sass'ı yeniden derleyin. Yalnızca tek bir yerde farklı bir değer gerekiyorsa kendi CSS sınıfınızı yazmak da meşru bir seçenektir.

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 · Gutter sınıfları · Flex yardımcıları · Display yardımcıları · Utilities API · CSS öğrenme rehberi