PF Next

Sizing

Width

Preview

.pf-u-w-0
.pf-u-w-25
.pf-u-w-50
.pf-u-w-75
.pf-u-w-100
.pf-u-w-initial (auto)
.pf-u-w-inherit
<div class="pf-u-w-0">
  .pf-u-w-0
</div>
<div class="pf-u-w-25">
  .pf-u-w-25
</div>
<div class="pf-u-w-50">
  .pf-u-w-50
</div>
<div class="pf-u-w-75">
  .pf-u-w-75
</div>
<div class="pf-u-w-100">
  .pf-u-w-100
</div>
<div class="pf-u-w-initial">
  .pf-u-w-initial (auto)
</div>
<div class="pf-u-w-inherit">
  .pf-u-w-inherit
</div>

Usage

Class Applied To Outcome
.pf-u-w-initial{-on-[breakpoint]} * Sets width: initial (auto)
.pf-u-w-inherit{-on-[breakpoint]} * Sets width: inherit
.pf-u-w-0{-on-[breakpoint]} * Sets width: 0%
.pf-u-w-25{-on-[breakpoint]} * Sets width: 25%
.pf-u-w-50{-on-[breakpoint]} * Sets width: 50%
.pf-u-w-75{-on-[breakpoint]} * Sets width: 75%
.pf-u-w-100{-on-[breakpoint]} * Sets width: 100%

Height

Preview

.pf-u-h-0
.pf-u-h-25
.pf-u-h-50
.pf-u-h-75
.pf-u-h-100
.pf-u-h-initial (auto)
.pf-u-h-inherit
<div class="pf-u-h-0 pf-u-display-inline-block">
  .pf-u-h-0
</div>
<div class="pf-u-h-25 pf-u-display-inline-block">
  .pf-u-h-25
</div>
<div class="pf-u-h-50 pf-u-display-inline-block">
  .pf-u-h-50
</div>
<div class="pf-u-h-75 pf-u-display-inline-block">
  .pf-u-h-75
</div>
<div class="pf-u-h-100 pf-u-display-inline-block">
  .pf-u-h-100
</div>
<div class="pf-u-h-initial pf-u-display-inline-block">
  .pf-u-h-initial (auto)
</div>
<div class="pf-u-h-inherit pf-u-display-inline-block">
  .pf-u-h-inherit
</div>

Usage

Class Applied To Outcome
.pf-u-h-initial{-on-[breakpoint]} * Sets height: initial (auto)
.pf-u-h-inherit{-on-[breakpoint]} * Sets height: inherit
.pf-u-h-0{-on-[breakpoint]} * Sets height: 0%
.pf-u-h-25{-on-[breakpoint]} * Sets height: 25%
.pf-u-h-50{-on-[breakpoint]} * Sets height: 50%
.pf-u-h-75{-on-[breakpoint]} * Sets height: 75%
.pf-u-h-100{-on-[breakpoint]} * Sets height: 100%

Documentation

Usage note

These utilities are not recommended for general layout purposes. They should primarily be used to enable responsive behaviors of certain components through breakpoints.