#Width

Classes to set the width of an element.

ClassStyles
w-10p
width: 10%;
w-20p
width: 20%;
w-30p
width: 30%;
w-40p
width: 40%;
w-50p
width: 50%;
w-60p
width: 60%;
w-70p
width: 70%;
w-80p
width: 80%;
w-90p
width: 90%;
w-100p
width: 100%;
w-0
width: 0;
w-auto
width: auto;
w-screen
width: 100vh;

#Scaled Widths

Updated
0.7.0

The w-{{value}} classes gives an element a percentage based width.

w-20p
w-40p
w-60p
w-80p
<div>
    <div class="w-20p">...</div>
    <div class="w-40p">...</div>
    <div class="w-60p">...</div>
    <div class="w-80p">...</div>
</div>

#Screen Width

The w-screen class makes an element span the entire viewport.

w-screen

<div>
    <div class="w-screen">...</div>
</div>

#Auto

The w-auto class makes an element use a browser determined width. This is commonly used to unset a previously set width.

w-auto

<div>
    <div class="w-auto">...</div>
</div>

#Responsive

New
0.7.0

All utility classes mentioned here support viewport based application. All you need to do is add a -<viewport> at the end of the class(es) you are using. For example, use w-50p-md to apply w-50p on medium screens and above.

<div class="w-50p-md">
    <!-- ... -->
</div>

For more information, visit the Viewports documentation.