Spacers

Use these helpful classes to separate content when margin & padding isn't large enough.

Usage

The spacer classes help to separate content vertically and create a 'gap' between elements on the page. You can choose from a wide variety of sizes to suit your needs.

Notation:

You can target the spacer classes by using spacer-{size}. The size being one of the classes below.

Properties:

Class	Properties
.spacer-1	height: 1px;
.spacer-2	height: 2px;
.spacer-3	height: 3px;
.spacer-4	height: 4px;
.spacer-5	height: 5px;
.spacer-10	height: 10px;
.spacer-15	height: 15px;
.spacer-20	height: 20px;
.spacer-30	height: 30px;
.spacer-35	height: 35px;
.spacer-40	height: 45px;
.spacer-50	height: 50px;
.spacer-75	height: 75px;
.spacer-100	height: 100px;
.spacer-150	height: 150px;
.spacer-200	height: 200px;
.spacer-300	height: 300px;
.spacer-400	height: 400px;
.spacer-500	height: 500px;

Examples

Vertical spacing:

Here, the grey space in the middle is caused by a spacer-50 class which pushes the last element to the bottom of the container.

<div class="d-flex justify-content-center flex-wrap">
    <div class="w-100"></div>
    <div class="spacer-50"></div>
    <div class="w-100"></div>
</div>

Variables

Add or remove spacer classes with the map variable below.

Variable	Value	Description
`$spacer-properties: ( 1px, 2px, 3px, 4px, 5px, 10px, 15px, 20px, 25px, 30px, 35px, 40px, 45px, 50px, 75px, 100px, 150px, 200px, 300px, 400px, 500px );`	Map(pixel/rem/em)	To remove or add spacers, just edit the map above - you can add spacers in pixels, rems or ems.