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