Spacing
Adjust spacing between, and within components. Voyager uses both explicit and contextual spacing.
Spacing
Voyager uses factors of 4 to create a spacing scale.
| Variable | Scale | Value |
|---|---|---|
| $spacer-0 | 0 | 0 |
| $spacer-sm | 1 | 4px |
| $spacer (default) | 2 | 8px |
| $spacer-lg | 3 | 16px |
| $spacer-xl | 4 | 24px |
| $spacer-xxl | 5 | 40px |
Padding
All sides
<div class="d-flex justify-content-around align-items-center">
<div class="qw-gray-1">.p-0</div>
<div class="qw-gray-1 p-1">.p-1</div>
<div class="qw-gray-1 p-2">.p-2</div>
<div class="qw-gray-1 p-3">.p-3</div>
<div class="qw-gray-1 p-4">.p-4</div>
<div class="qw-gray-1 p-5">.p-5</div>
</div>
Directional
Directional rules are defined in the following order: .m<direction>-<size>, i.e. .pb-4 sets a padding-bottom of 24px. They can also be define for the x & y axis, i.e. .px-1 sets an x-axis padding of 4px.
<div class="d-flex justify-content-around align-items-center">
<div class="qw-gray-1">.p-0</div>
<div class="qw-gray-1 pt-3">.pt-3</div>
<div class="qw-gray-1 pr-3">.pr-3</div>
<div class="qw-gray-1 pb-3">.pb-3</div>
<div class="qw-gray-1 pl-3">.pl-3</div>
<div class="qw-gray-1 px-3">.px-3</div>
<div class="qw-gray-1 py-3">.pt-3</div>
</div>
Direction related classes use CSS logical properties. While the property may say .ml-4, the rule will contain margin-inline-start: 24px for better support of right-to-left langauges.
Responsive rules
Base spacing utilities apply to all screen sizes, from xs to xl, unless they have a specified breakpoint defined within them. Breakpoints apply to the specified screensize and up. They are defined in the following order: .p-<breakpoint>-<size>
<div class="d-flex align-items-center py-3">
<div class="qw-gray-1 p-0 p-xs-1 p-sm-2 p-md-3 p-lg-4 p-xl-5">..p-0 .p-xs-1 .p-sm-2 .p-md-3 .p-lg-4 .p-xl-5</div>
</div>
Directional responsive rules are defined in the following order: .m<direction>-<breakpoint>-<size>, i.e. .pb-md-4 sets a padding-bottom of 24px at the medium breakpoint.
Margin
All sides
<div class="d-flex justify-content-around align-items-center">
<div class="border"><div class="qw-gray-1 m-0">.m-0</div></div>
<div class="border"><div class="qw-gray-1 m-1">.m-1</div></div>
<div class="border"><div class="qw-gray-1 m-2">.m-2</div></div>
<div class="border"><div class="qw-gray-1 m-3">.m-3</div></div>
<div class="border"><div class="qw-gray-1 m-4">.m-4</div></div>
<div class="border"><div class="qw-gray-1 m-5">.m-5</div></div>
</div>
Directional
<div class="d-flex justify-content-around align-items-center">
<div class="border"><div class="qw-gray-1 mt-3">.mt-3</div></div>
<div class="border"><div class="qw-gray-1 mr-3">.mr-3</div></div>
<div class="border"><div class="qw-gray-1 mb-3">.mb-3</div></div>
<div class="border"><div class="qw-gray-1 ml-3">.ml-3</div></div>
<div class="border"><div class="qw-gray-1 mx-3">.mx-3</div></div>
<div class="border"><div class="qw-gray-1 my-3">.my-3</div></div>
<div>
Auto margins
We also include an .mx-auto class for horizontally centering fixed-width block level content—that is, content that has display: block and a width set—by setting the horizontal margins to auto.
<div class="border w-100 d-flex">
<div class="qw-gray-1 mx-auto">.mx-auto</div>
</div>
<div class="border w-100 d-flex">
<div class="qw-gray-1 ml-auto">.ml-auto</div>
</div>
<div class="border w-100 d-flex">
<div class="qw-gray-1 mr-auto">.mr-auto</div>
</div>
Responsive rules
<div class="border">
<div class="qw-gray-1 m-0 m-xs-1 m-sm-2 m-md-3 m-lg-4 m-xl-5">.m-0 .m-xs-1 .m-sm-2 .m-md-3 .m-lg-4 .m-xl-5</div>
</div>
Spacing utilities apply to all screen sizes, from xs to xl, unless they have a specified breakpoint assigned within them. Breakpoint utilities apply to the specified screensize and up.
Directional responsive rules are combined in the following order: .m<direction>-<breakpoint>-<size>, i.e. .mt-sm-1 sets a margin-top of 4px at the small breakpoint.