سایز بندی
با ابزارهای عرض و ارتفاع خود، به راحتی یک عنصر را به عرض یا بلندی (نسبت به مادرش) بسازید.
شامل پشتیبانی از،،، 25%
و 50%
به 75%
طور 100%
پیش فرض است. کلاس ها با استفاده از فرمت {property}-{size}
برای xs
و {property}-{breakpoint}-{size}
برای sm
،،، md
و lg
نامگذاری می xl
شوند xxl
.
عرض (نسبت به والدین)
.w-100
.w-75
.w-50
.w-25
.w-auto
<div class="bg-light text-dark p-2 border-dashed mb-3 w-100"><code>.w-100</code></div>
<div class="bg-light text-dark p-2 border-dashed mb-3 w-75"><code>.w-75</code></div>
<div class="bg-light text-dark p-2 border-dashed mb-3 w-50"><code>.w-50</code></div>
<div class="bg-light text-dark p-2 border-dashed mb-3 w-25"><code>.w-25</code></div>
<div class="bg-light text-dark p-2 border-dashed mb-3 w-auto"><code>.w-auto</code></div>
قد (نسبت به والدین)
.h-100
.h-75
.h-50
.h-25
.h-auto
<div class="vh-50 text-dark py-3">
<div class="row h-100">
<div class="col">
<div class="bg-light p-2 border-dashed mb-3 h-100"><code>.h-100</code></div>
</div>
<div class="col">
<div class="bg-light p-2 border-dashed mb-3 h-75"><code>.h-75</code></div>
</div>
<div class="col">
<div class="bg-light p-2 border-dashed mb-3 h-50"><code>.h-50</code></div>
</div>
<div class="col">
<div class="bg-light p-2 border-dashed mb-3 h-25"><code>.h-25</code></div>
</div>
<div class="col">
<div class="bg-light p-2 border-dashed mb-3 h-auto"><code>.h-auto</code></div>
</div>
</div>
</div>
کلاس های ویژه (مرتبط با viewport)
تغییرات پاسخگو نیز برای اندازهبندی کلاسها نسبت به viewport
. در اینجا تمام کلاس های پشتیبانی آمده است:
.mw-100 { max-width: 100%; }
.min-vw-100 { min-width: 100vw; }
.vw-100 { width: 100vw; }
.max-vh-100 { max-height: 100vh; }
.max-vh-75 { max-height: 75vh; }
.max-vh-50 { max-height: 50vh; }
.max-vh-25 { max-height: 25vh; }
.min-vh-100 { min-height: 100vh; }
.min-vh-75 { min-height: 75vh; }
.min-vh-50 { min-height: 50vh; }
.min-vh-25 { min-height: 25vh; }
.vh-100 { height: 100vh !important; }
.vh-75 { height: 75vh !important; }
.vh-50 { height: 50vh !important; }
.vh-25 { height: 25vh !important; }
.max-vh-sm-100 { max-height: 100vh; }
.max-vh-sm-75 { max-height: 75vh; }
.max-vh-sm-50 { max-height: 50vh; }
.max-vh-sm-25 { max-height: 25vh; }
.min-vh-sm-100 { min-height: 100vh; }
.min-vh-sm-75 { min-height: 75vh; }
.min-vh-sm-50 { min-height: 50vh; }
.min-vh-sm-25 { min-height: 25vh; }
.vh-sm-100 { height: 100vh !important; }
.vh-sm-75 { height: 75vh !important; }
.vh-sm-50 { height: 50vh !important; }
.vh-sm-25 { height: 25vh !important; }
.max-vh-md-100 { max-height: 100vh; }
.max-vh-md-75 { max-height: 75vh; }
.max-vh-md-50 { max-height: 50vh; }
.max-vh-md-25 { max-height: 25vh; }
.min-vh-md-100 { min-height: 100vh; }
.min-vh-md-75 { min-height: 75vh; }
.min-vh-md-50 { min-height: 50vh; }
.min-vh-md-25 { min-height: 25vh; }
.vh-md-100 { height: 100vh !important; }
.vh-md-75 { height: 75vh !important; }
.vh-md-50 { height: 50vh !important; }
.vh-md-25 { height: 25vh !important; }
.max-vh-lg-100 { max-height: 100vh; }
.max-vh-lg-75 { max-height: 75vh; }
.max-vh-lg-50 { max-height: 50vh; }
.max-vh-lg-25 { max-height: 25vh; }
.min-vh-lg-100 { min-height: 100vh; }
.min-vh-lg-75 { min-height: 75vh; }
.min-vh-lg-50 { min-height: 50vh; }
.min-vh-lg-25 { min-height: 25vh; }
.vh-lg-100 { height: 100vh !important; }
.vh-lg-75 { height: 75vh !important; }
.vh-lg-50 { height: 50vh !important; }
.vh-lg-25 { height: 25vh !important; }
.max-vh-xl-100 { max-height: 100vh; }
.max-vh-xl-75 { max-height: 75vh; }
.max-vh-xl-50 { max-height: 50vh; }
.max-vh-xl-25 { max-height: 25vh; }
.min-vh-xl-100 { min-height: 100vh; }
.min-vh-xl-75 { min-height: 75vh; }
.min-vh-xl-50 { min-height: 50vh; }
.min-vh-xl-25 { min-height: 25vh; }
.vh-xl-100 { height: 100vh !important; }
.vh-xl-75 { height: 75vh !important; }
.vh-xl-50 { height: 50vh !important; }
.vh-xl-25 { height: 25vh !important; }
.max-vh-xxl-100 { max-height: 100vh; }
.max-vh-xxl-75 { max-height: 75vh; }
.max-vh-xxl-50 { max-height: 50vh; }
.max-vh-xxl-25 { max-height: 25vh; }
.min-vh-xxl-100 { min-height: 100vh; }
.min-vh-xxl-75 { min-height: 75vh; }
.min-vh-xxl-50 { min-height: 50vh; }
.min-vh-xxl-25 { min-height: 25vh; }
.vh-xxl-100 { height: 100vh !important; }
.vh-xxl-75 { height: 75vh !important; }
.vh-xxl-50 { height: 50vh !important; }
.vh-xxl-25 { height: 25vh !important; }