Sizing | Inertia Docs

Responsive sizing

The following values: 10%, 20%, 25%, 30%, 40%, 50%, 60%, 70%, 75%, 80%, 90%, 100%, auto.

.w-{breakpoint}-{size}: sets the width in %.
.h-{breakpoint}-{size}: sets the height in %.
.vw-{breakpoint}-{size}: sets the width in vw.
.vh-{breakpoint}-{size}: sets the height in vh.
.min-vw-{breakpoint}-{size}: sets the min-width in vw.
.min-vh-{breakpoint}-{size}: sets the min-height in vh.


              <div class="w-sm-30"></div>

              <div class="h-sm-30"></div>


              <div class="vw-md-60"></div>

              <div class="vh-md-60"></div>


              <div class="min-vw-lg-90"></div>

              <div class="min-vh-lg-90"></div>

Fixed sizes

.w-{breakpoint}-{150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700}: sets width in px.
.h-{breakpoint}-{150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700}: sets height in px.


              <div class="w-200"></div>

              <div class="h-200"></div>


              <div class="w-sm-250"></div>

              <div class="h-sm-250"></div>


              <div class="w-md-300"></div>

              <div class="h-md-300"></div>


              <div class="w-lg-400"></div>

              <div class="h-lg-400"></div>


              <div class="w-xl-650"></div>

              <div class="h-xl-650"></div>