Boyutlandırma

Genişlik ve yükseklik için önceden tanımlanmış classlar ile bir öğeyi kolayca geniş veya yüksek yapabilirsiniz.

Dış kapsayıcıya göre#

Genişlik#

Genişlik 25%

Genişlik 50%

Genişlik 75%

Genişlik 100%

Genişlik otomatik

<div class="w-25">Genişlik 25%</div>
<div class="w-50">Genişlik 50%</div>
<div class="w-75">Genişlik 75%</div>
<div class="w-100">Genişlik 100%</div>
<div class="w-auto">Genişlik auto</div>

Yükseklik#

Yükseklik 25%

Yükseklik 50%

Yükseklik 75%

Yükseklik 100%

Yükseklik otomatik

<div class="h-25">Yükseklik 25%</div>
<div class="h-50">Yükseklik 50%</div>
<div class="h-75">Yükseklik 75%</div>
<div class="h-100">Yükseklik 100%</div>
<div class="h-auto">Yükseklik otomatik</div>

Kırılma noktası ile kullanım#

Kırılma noktaları ile beraber kullanabilirsiniz. Örneğin, .w-25.w-md-100...

@media (min-width: 1170px) {
  .w-xl-100 {
    width: 100%;
  }
  .w-xl-75 {
    width: 75%;
  }
  ...
}
    
@media (min-width: 768px) {
  .h-md-100 {
    height: 100%;
  }
  .h-md-75 {
    height: 75%;
  }
  ...
}

...

Değişimi görmek için ekranı küçültün. Genişlik < col-xl

Genişlik#

.w-100 .w-xl-50

.w-50 .w-xl-100

Yükseklik#

.h-25 .h-xl-50

.h-50 .h-xl-100