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>