Spacing
Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties.
The class modifiers are named using the following format:
[property][side]-[breakpoint]-[size]
Modifier | Values |
property | m: margin p: padding |
side | t: top
r: right
b: bottom
l: left
x: left and right
y: top and bottom |
breakpoint | xs, sm, md, lg, xl |
size | 0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 24, 32, 40, 48, 56, 64, 72, 80 |
Removing the breakpoint modifier will apply the size to all breakpoints
<div className='mt-20'>
20 pixel top padding at all breakpoints
</div>
Removing the side modifier will apply the size to all sides
<div className='p-md-20'>
20 pixel padding on all sides at the md breakpoint
</div>
You can modify the sizes by overriding the default sass variables in your projects styles
Assign overrides before the reactium-ui.scss file has been imported into your style.scss file
// Spacing Sizes
$sizing: (0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 24, 25, 32, 40, 48, 56, 64, 72, 80);
Last modified 2yr ago