Width

Utilities for controlling the width of an element


Class
Properties
w-0
w-1
w-2
w-3
w-4
w-5
w-6
w-7
w-8
w-10
w-12
w-16
w-20
w-24
w-32
w-40
w-48
w-56
w-64
w-72
w-80
w-88
w-96
w-1/2
w-1/3
w-2/3
w-1/4
w-1/5
w-2/5
w-3/4
w-3/5
w-4/5
w-11/10
w-12/10
w-13/10
w-14/10
w-15/10
w-full
w-screen
w-min
w-max

Fixed width

Fixed widths includes support for all the values in the $spacers Sass map.

<div class="w-10"></div>
<div class="w-20"></div>
<div class="w-32"></div>
<div class="w-48"></div>

Relative to the parent

Fluid widths includes support for all the values in the $percentage-sizers Sass map.

<div class="w-1/4"></div>
<div class="w-1/2"></div>
<div class="w-2/3"></div>
<div class="w-full"></div>

Relative to the viewport

You can also use utilities to set the width and height relative to the viewport.

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

Auto

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

Responsive

Responsive variations also exist for each width value. Use the .w-{breakpoint}-{value} for sm, md, lg, xl, and xxl to any existing width utility.

<div class="w-full w-md-16 ..."></div>
UI Components

Start building incredible websites and apps with the pre-made components and pages.

Explore ->