Margins and Paddings
Velocity utilizes a customized responsive version of Bootstrap’s
spacing utitiles for controlling how elements and components are spaced and sized
across different screens. For example, if you apply the spacing unit .m-4 to
a component, it will be 20px across all devices, but if you add a responsiveness selector
.m-md-4
these 20px will by only applied for screens above 768px.
SpaceUnit
size
Value
1
4px
2
8px
3
16px
4
20px
5
24px
6
32px
7
40px
8
48px
Small
<768px
Medium
≥768px
Large
≥1200px
Extra Large
≥1400px
Responsiveness selector
md
lg
xl
Example Margin
.m-3
.m-md-3
.m-lg-3
.m-xl-3
Example Padding
.p-3
.p-md-3
.p-lg-3
.p-xl-3