Cirrus

#Width

Classes to set the width of an element.

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

#Scaled Widths

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

w-20
w-40
w-60
w-80
<div>
    <div class="w-20">...</div>
    <div class="w-40">...</div>
    <div class="w-60">...</div>
    <div class="w-80">...</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>