Bootstrap Boyut Sınıfları: w-*, h-*, vh-100, overflow, float ve clearfix

Üst ögeye göre genişlik ve yükseklik

Belgeye göre genişlik ve yükseklik sınıfları _utilities.scss içindeki utilities API kaydından üretilir ve varsayılanda yüzde 25, 50, 75, 100 ile auto değerlerini kapsar. Her sınıf tek bir özellik ayarlar ve !important taşır; .w-25 derlenmiş CSS'te width: 25% !important; demektir. Yüzde değerler her zaman içinde bulunulan ögenin boyutuna göre hesaplanır, ekrana göre değil.

<div class="w-25 p-3 mb-2 bg-light">Genişlik %25 (.w-25)</div>
<div class="w-50 p-3 mb-2 bg-light">Genişlik %50 (.w-50)</div>
<div class="w-75 p-3 mb-2 bg-light">Genişlik %75 (.w-75)</div>
<div class="w-100 p-3 mb-2 bg-light">Genişlik %100 (.w-100)</div>
<div class="w-auto p-3 mb-2 bg-light">Genişlik auto (.w-auto)</div>

<div class="bg-light" style="height: 120px;">
  <div class="h-25 d-inline-block bg-info" style="width: 6rem;">%25</div>
  <div class="h-50 d-inline-block bg-info" style="width: 6rem;">%50</div>
  <div class="h-75 d-inline-block bg-info" style="width: 6rem;">%75</div>
  <div class="h-100 d-inline-block bg-info" style="width: 6rem;">%100</div>
  <div class="h-auto d-inline-block bg-info" style="width: 6rem;">auto</div>
</div>

Genişlik örneği beklendiği gibi çalışır, çünkü blok ögelerin üst ögesinin genişliği her zaman bellidir. .w-auto ise blok bir div üzerinde fark yaratmaz; blok öge zaten satırı doldurur. Bu sınıfın asıl kullanımı, başka bir kuraldan gelen sabit genişliği sıfırlamak ya da satır içi blok ve esnek kutu ögelerinde içeriğe göre genişlik istemektir. Yükseklik örneğinde dış kutunun height: 120px aldığına dikkat edin: yüzde yükseklik ancak üst ögenin yüksekliği tanımlıysa anlam taşır. Üst öge yüksekliğini içeriğinden alıyorsa .h-50 ya da .h-100 görünür bir etki yapmaz; bu, en sık karşılaşılan şikâyettir.

.w-100 sınıfının grid içinde ikinci bir görevi de vardır: sütunların arasına konduğunda satırı kırar ve sonraki sütunların yeni bir satırda başlamasını sağlar. Bu kullanım sütun hizalama ve sıralama yazısında anlatılıyor. Resmî örneklerde .h-100 sık görülür; Jumbotron şablonundaki iki kutu aynı satırda eşit yükseklikte kalsın diye h-100 p-5 sınıflarını taşır.

Üst sınır: .mw-100 ve .mh-100

.mw-100 ögenin genişliğini değiştirmez, yalnızca max-width: 100% sınırı koyar; .mh-100 aynı işi yükseklik için yapar. Bu yüzden genişliği kendi içeriğinden gelen ögelerde, özellikle görsellerde, taşmayı önlemek için kullanılırlar. Belgedeki yükseklik örneği bunu iyi gösterir: 200px yükseklik isteyen bir öge, 100px yüksekliğindeki kutunun içinde .mh-100 sayesinde 100px ile sınırlanır.

<img src="kampanya.jpg" class="mw-100" alt="Kampanya görseli">

<div class="bg-light" style="height: 100px;">
  <div class="mh-100 bg-info" style="width: 10rem; height: 200px;">
    200px istendi, üst öge 100px olduğu için %100 ile sınırlandı
  </div>
</div>

<section class="min-vh-100 p-5 bg-dark text-white">
  En az ekran yüksekliği kadar uzun bir giriş bölümü (.min-vh-100)
</section>

Görsellerde .mw-100 ile .img-fluid arasındaki fark küçük ama önemlidir: .img-fluid hem max-width: 100% hem height: auto verir, böylece görsel küçülürken en boy oranı korunur. Yalnızca .mw-100 verdiğinizde HTML'deki height değeri sabit kalırsa görsel daralırken basık görünebilir. Görseller için önerilen yol img-fluid ve figure yazısında anlatılıyor.

Ekrana göre boyut: vw ve vh sınıfları

Dört sınıf ögeyi tarayıcı penceresine göre boyutlandırır: .vw-100 genişliği 100vw, .vh-100 yüksekliği 100vh yapar; .min-vw-100 ve .min-vh-100 ise bunları alt sınır olarak koyar. Bootstrap 5.0.2 derlenmiş CSS dosyasında bu sınıflar şöyle tanımlıdır:

.w-25 {
  width: 25% !important;
}

/* (kısaltıldı) */

.mw-100 {
  max-width: 100% !important;
}

.vw-100 {
  width: 100vw !important;
}

.min-vw-100 {
  min-width: 100vw !important;
}

/* (kısaltıldı) */

.min-vh-100 {
  min-height: 100vh !important;
}

Pratikte en kullanışlısı .min-vh-100 sınıfıdır: tam ekran bir giriş bölümü en az pencere yüksekliğinde olur, içerik uzarsa da bölüm onunla birlikte uzar. .vh-100 ise yüksekliği sabitler; içerik pencereden uzun olduğunda taşar. Bu yüzden içeriği bilinmeyen bölümlerde alt sınır veren sınıfı tercih etmek daha güvenlidir. Viewport kavramının kendisi ve mobil görünüm ayarı mobil uyumluluk yazısında ele alınıyor.

Uygulamalı örnek: alt bilgiyi sayfanın altında tutmak

Resmî Sticky Footer şablonu, içerik kısa olduğunda bile alt bilginin pencerenin altında durmasını yalnızca yardımcı sınıflarla çözer. Fikir şudur: html ögesine .h-100 verilir ki body yüzde yüksekliği hesaplayabilsin, body ögesine d-flex flex-column h-100 verilir, alt bilgi ise .mt-auto ile kalan boşluğu üstüne alarak aşağı itilir. Aşağıdaki sayfa şablonun kısaltılmış hâlidir:

<!doctype html>
<html lang="tr" class="h-100">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Altta kalan alt bilgi</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="d-flex flex-column h-100">
  <main class="flex-shrink-0">
    <div class="container">
      <h1 class="mt-5">Kısa içerikli sayfa</h1>
      <p class="lead">İçerik az olsa da alt bilgi ekranın altında durur.</p>
    </div>
  </main>
  <footer class="mt-auto py-3 bg-light">
    <div class="container">
      <span class="text-muted">Alt bilgi metni</span>
    </div>
  </footer>
</body>
</html>

Bu örnek yüzde yüksekliğin zincir mantığını gösterir: html pencereyi, body html ögesini, alt bilgi ise esnek kutunun kalan alanını referans alır. Zincirdeki bir halka eksik kalırsa, örneğin html ögesinden .h-100 silinirse, alt bilgi içeriğin hemen altına çıkar. Esnek kutu sınıfları flex yardımcıları yazısında, .mt-auto ise spacing yazısında anlatılıyor.

Aynı zincir resmî Cover şablonunda da kullanılır: html ögesi h-100, body ögesi d-flex h-100 text-center text-white bg-dark alır ve içteki kapsayıcı d-flex w-100 h-100 p-3 mx-auto flex-column sınıflarıyla pencerenin tamamını doldurur. İki şablon arasındaki ortak ders şudur: yüzde yükseklik kullanacaksanız zincirin en üstünden başlayın, ara ögelerin hiçbirini yüksekliksiz bırakmayın. Alternatif olarak tek bir bölümün en az pencere kadar uzun olması yetiyorsa zincir kurmadan doğrudan .min-vh-100 kullanabilirsiniz.

Taşma: .overflow-* sınıfları

Belge, overflow özelliği için dört varsayılan değer ve sınıf sunar: .overflow-auto, .overflow-hidden, .overflow-visible ve .overflow-scroll. Bu sınıflar varsayılanda duyarlı değildir; yani .overflow-md-auto gibi bir sınıf yoktur. Taşmanın görünür olması için kutunun bir boyut sınırı olması gerekir; belgedeki örnekler max-width ve max-height değerlerini satır içi stil olarak verir.

<div class="overflow-auto p-3 mb-3 bg-light" style="max-width: 260px; max-height: 100px;">
  .overflow-auto: içerik kutuya sığmadığında kaydırma çubuğu yalnızca gerektiğinde çıkar.
  Bu paragraf bilerek uzun tutuldu ki kutunun yüksekliğini aşsın ve kaydırma görünsün.
</div>
<div class="overflow-hidden p-3 mb-3 bg-light" style="max-width: 260px; max-height: 100px;">
  .overflow-hidden: taşan kısım kesilir, kaydırma çubuğu çıkmaz. Kutuya sığmayan satırlar
  görünmez olur ve kullanıcı bunlara ulaşamaz.
</div>
<div class="overflow-visible p-3 mb-3 bg-light" style="max-width: 260px; max-height: 100px;">
  .overflow-visible: taşan içerik kutunun dışına akar ve alttaki ögelerin üzerine binebilir.
</div>
<div class="overflow-scroll p-3 bg-light" style="max-width: 260px; max-height: 100px;">
  .overflow-scroll: içerik sığsa bile kaydırma alanı her zaman gösterilir.
</div>

.overflow-auto çoğu durumda doğru seçimdir: kaydırma çubuğu yalnızca içerik sığmadığında çıkar. .overflow-scroll çubuğu her zaman gösterir. .overflow-hidden taşan kısmı keser; yuvarlatılmış köşeli kutularda içteki görseli köşe çizgisinde kırpmak için kullanışlıdır, ancak metin içeren alanlarda içeriğin bir kısmının erişilemez olmasına yol açabilir. Belge $overflows adlı bir Sass değişkeninden söz etse de v5.0.2 kaynak kodundaki _variables.scss dosyasında bu değişken bulunmaz; değerler doğrudan _utilities.scss içindeki "overflow" kaydında listelenir, değiştirmek isterseniz o kaydı düzenlersiniz.

Yüzdürme: .float-* sınıfları ve .clearfix

Float sınıfları bir ögeyi CSS float özelliğiyle sola ya da sağa yaslar ve metnin onun etrafından akmasını sağlar. Üç değer vardır: .float-start (soldan sağa sayfada float: left), .float-end (float: right) ve .float-none. Belgeye göre özgüllük sorunlarını önlemek için !important eklenmiştir ve sınıflar grid ile aynı kırılma noktalarını kullanan duyarlı sürümlere sahiptir: .float-sm-start, .float-md-end, .float-lg-none gibi. Duyarlı sınıf "bu genişlik ve üstü" anlamına gelir; .float-md-end 768px ve üstünde sağa yaslar, daha dar ekranda yüzdürmez. Kırılma noktalarının tablosu breakpoint yazısında var.

Belgenin özellikle uyardığı nokta, float sınıflarının esnek kutu ögelerinde etkisiz olduğudur. .d-flex taşıyan bir kutunun doğrudan çocuğuna .float-end verirseniz hiçbir şey olmaz; orada .ms-auto ya da justify-content sınıflarını kullanmalısınız. Ayrıca yüzen ögeler üst ögenin yüksekliğine katılmaz. İçinde yalnızca yüzen ögeler olan bir kutu sıfır yüksekliğe çöker ve arka plan rengi görünmez. Bunu çözmek için .clearfix sınıfı üst ögeye verilir:

<div class="bg-light p-2 mb-4 clearfix">
  <button type="button" class="btn btn-secondary float-start">Sola yaslı buton</button>
  <button type="button" class="btn btn-secondary float-end">Sağa yaslı buton</button>
</div>

<div class="clearfix">
  <img src="kapak.jpg" width="200" height="150"
       class="float-md-end ms-md-3 mb-3 rounded" alt="Yazının kapak görseli">
  <p>md ve üstündeki ekranlarda görsel sağa yaslanır, metin onun solundan akar.
     Daha dar ekranlarda görsel yüzmez ve metnin üstünde tek başına durur.</p>
</div>

.clearfix, derlenmiş CSS'te ::after sözde ögesiyle display: block; clear: both; content: ""; üreten küçük bir kuraldır; kutunun sonuna görünmez bir öge koyup yüzen ögelerin altına iner ve kutuyu onları saracak kadar uzatır. Aynı kural Sass tarafında karışım olarak da kullanılabilir:

// scss/mixins/_clearfix.scss (v5.0.2)
@mixin clearfix() {
  &::after {
    display: block;
    clear: both;
    content: "";
  }
}

// Kendi sınıfınızda kullanımı (belgedeki örnek)
.element {
  @include clearfix;
}

v4'teki .float-left ve .float-right adları v5'te .float-start ve .float-end olarak değişti; eski float() karışımı da kaldırıldı. Ayrıntılar geçiş yazısında. Görselleri metin içinde yaslamak için de aynı sınıflar kullanılır; belgedeki görsel sayfası rounded float-start ve rounded float-end birleşimlerini gösterir.

Dikey hizalama: .align-* sınıfları

.align-baseline, .align-top, .align-middle, .align-bottom, .align-text-top ve .align-text-bottom sınıfları CSS vertical-align özelliğini ayarlar. Belgenin altını çizdiği kısıt şudur: bu özellik yalnızca satır içi, satır içi blok, satır içi tablo ve tablo hücresi ögelerini etkiler. Bir div ögesini kutusunun ortasına almak için .align-middle işe yaramaz; o iş için flex yardımcılarındaki align-items sınıfları kullanılır.

<p>
  Durum: <img src="onay.svg" width="20" height="20" class="align-text-top" alt="Onaylandı">
  <span class="align-middle">Yayında</span>
</p>

<table class="table" style="height: 120px;">
  <tbody>
    <tr>
      <td class="align-top">align-top</td>
      <td class="align-middle">align-middle</td>
      <td class="align-bottom">align-bottom</td>
      <td class="align-baseline">align-baseline</td>
    </tr>
  </tbody>
</table>

Satır içi kullanımda tipik senaryo, metin içindeki küçük bir simgeyi yazı satırıyla hizalamaktır. Bootstrap'in Reboot katmanı img ve svg ögelerine varsayılan olarak vertical-align: middle verir; farklı bir hizalama istiyorsanız .align-text-top gibi bir sınıfla ezersiniz. Tablo hücrelerinde ise sınıf hücreye, satıra ya da tablonun kendisine verilebilir; tablo belgesindeki table align-middle örneği tüm gövde hücrelerini ortaya hizalar. Tablolardaki hizalama kuralları tablo yazısında ayrıntılı anlatılıyor.

Uygulamalı örnek: ürün kutusu ve kaydırılabilir liste

Son parça bu yazıdaki sınıfları bir arada kullanır. Ürün görseli küçük ekranda metnin üstünde durur, sm ve üstünde sola yaslanır; .mw-100 görselin dar ekranda kutudan taşmasını önler, .clearfix ise kutunun görseli tamamen sarmasını sağlar. Altındaki sipariş listesi sabit bir üst yükseklik alır ve fazlası .overflow-auto ile kaydırılır.

<div class="border rounded p-3 clearfix">
  <img src="urun.jpg" width="160" height="160"
       class="float-sm-start me-sm-3 mb-3 mw-100 rounded" alt="Ürün görseli">
  <h3 class="fs-5">Kablosuz klavye</h3>
  <p class="text-muted">Görsel sm ve üstünde sola yaslanır; clearfix kutunun görseli tam sarmasını sağlar.</p>
</div>

<h4 class="fs-6 mt-4">Sipariş geçmişi</h4>
<ul class="list-unstyled border rounded p-2 overflow-auto" style="max-height: 9rem;">
  <li class="py-1">#1042 Teslim edildi</li>
  <li class="py-1">#1041 Kargoda</li>
  <li class="py-1">#1040 Hazırlanıyor</li>
  <li class="py-1">#1039 Teslim edildi</li>
  <li class="py-1">#1038 İade edildi</li>
  <li class="py-1">#1037 Teslim edildi</li>
</ul>

Bu kalıpta dikkat edilecek iki ayrıntı var. Birincisi, görseldeki me-sm-3 ve mb-3 boşlukları yalnızca görsel yüzerken anlamlıdır; dar ekranda görsel tek başına durduğunda alt boşluk metni ondan ayırır. İkincisi, liste kutusunun yüksekliği max-height ile verildi; sabit height kullanılsaydı az ögeli bir listede gereksiz boş alan kalırdı.

Sass tarafı

Bu yazıdaki sınıfların hepsi utilities API ile üretilir. İlgili kayıtlar kısaltılmış olarak şöyledir:

// scss/_utilities.scss (v5.0.2), kısaltılmış
"width": (
  property: width,
  class: w,
  values: (
    25: 25%,
    50: 50%,
    75: 75%,
    100: 100%,
    auto: auto
  )
),
"overflow": (
  property: overflow,
  values: auto hidden visible scroll,
),
"float": (
  responsive: true,
  property: float,
  values: (
    start: left,
    end: right,
    none: none,
  )
),
"align": (
  property: vertical-align,
  class: align,
  values: baseline top middle bottom text-bottom text-top
),

Kayıtlarda responsive: true yalnızca float için yazılıdır; bu yüzden genişlik, yükseklik, taşma ve dikey hizalama sınıflarının kırılma noktası sürümleri yoktur. Örneğin .w-md-50 gibi bir sınıf 5.0.2'de bulunmaz. Kendi değerinizi eklemek ya da bir kayda duyarlılık kazandırmak için kaydı değiştirmeniz gerekir; yöntem utilities API yazısında anlatılıyor.

Sık yapılan hatalar

• Yüksekliği tanımsız kutuda .h-100: yüzde yükseklik için üst ögenin yüksekliği belli olmalı; gerekirse zinciri html ve body ögesine kadar kurun.
• Duyarlı boyut sınıfı aramak: .w-md-50 ya da .overflow-md-hidden 5.0.2'de yoktur; genişlik için grid sütunlarını kullanın.
• Flex içinde float: esnek kutu ögelerinde float etkisizdir; .ms-auto ya da hizalama sınıflarına geçin.
• .clearfix sınıfını yüzen ögeye vermek: sınıf yüzen ögeleri içeren üst ögeye verilir.
• div için .align-middle: vertical-align blok ögelerde çalışmaz; flex ile ortalayın.
• İçeriği bilinmeyen bölümde .vh-100: uzun içerik taşar; .min-vh-100 daha güvenlidir.
• Metin kutusunda .overflow-hidden: taşan metin okunamaz hâle gelir; kaydırma gerekiyorsa .overflow-auto kullanın.

Sık Sorulan Sorular

Bootstrap'te bir ögeyi tam genişlik yapmak için hangi sınıf kullanılır?

.w-100 ögeye üst ögesinin genişliğinin tamamını verir. Pencerenin tamamını kaplamasını istiyorsanız .vw-100 vardır, ancak kapsayıcı içinde kullanıldığında yatay taşmaya yol açabileceğini göz önünde bulundurun.

.h-100 neden hiçbir şey değiştirmiyor?

Yüzde yükseklik üst ögenin yüksekliğine göre hesaplanır. Üst öge yüksekliğini içeriğinden alıyorsa hesaplanacak bir değer yoktur. Üst ögeye bir yükseklik verin ya da esnek kutu düzenine geçin.

.h-100 ile .vh-100 arasındaki fark nedir?

.h-100 yüksekliği üst ögenin yüksekliğinin yüzde 100'ü yapar ve üst ögenin yüksekliği tanımlı değilse etkisizdir. .vh-100 ise üst ögeye bakmaz, yüksekliği doğrudan tarayıcı penceresinin yüksekliğine eşitler. Biri zincir ister, diğeri sabit bir ölçü verir.

Float mı, flex mi kullanmalıyım?

Metnin bir görselin etrafından akması gibi klasik durumlar için float uygundur. Ögeleri yan yana dizmek, aralarındaki boşluğu dağıtmak ya da dikey ortalamak için flex yardımcıları daha uygundur; float o işler için tasarlanmamıştır ve flex içinde zaten çalışmaz.

Kaydırılabilir bir kutu nasıl yapılır?

Kutuya .overflow-auto verin ve bir üst sınır koyun, örneğin style="max-height: 12rem;". Sınır olmadan kutu içerikle birlikte uzar ve kaydırma hiç oluşmaz.

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 flex yardımcıları · Margin ve padding sınıfları · Display ve gizleme sınıfları · Görseller ve ratio · Position yardımcıları