Spacing Utilities
The spacing utilities included with the KW UI Kit directly align with Bootstrap's Spacing Utilities. The only difference is the breakpoints match up with Flexbox Grid's breakpoints.
These spacing utilities allow you to assign responsive-friendly margin or padding values to an element.
Notation
Spacing utilities that apply to all breakpoints (from xs to lg) should not have a breakpoint abbreviation in them. This is because those classes are applied for every screen size and are not bound by a media query.
The syntax for usage is as follows:
// For all breakpoints{property}{sides}-{size}// For specific breakpoints{property}{sides}-{breakpoint}-{size}
| property | sides | size |
|---|---|---|
m for margin | t for top | 0 for none |
p for padding | b for bottom | 1 for 0.25rem |
l for left | 2 for 0.5rem | |
r for right | 3 for 1rem | |
x for left and right | 4 for 1.5rem | |
y for top and bottom | 5 for 3rem | |
| Blank for all sides | auto (margins only) |
Examples
// No margin on top<div className="mt-0"></div>// 0.25rem margin left<div className="ml-1"></div>// Padding 0.5rem left and right<div className="px-2"></div>// Padding 1rem on all sides<div className="p-3"></div>// Margin auto left and right<div className="mx-auto"></div>