Spacing
SpaceMax includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance. The Bootstrap default spacer also available along with SpaceMax
Open Bootstrap Default SpacingHow it works
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. Classes
are built from Scss mixins Sass from .10rem to 100rem.
Spacer Class Reference
Spacer for sections
.space- Apply padding at the top and bottom of the element.
.space--2- Apply a little more padding than
.spaceat the top and bottom of the element.
.space--3- Apply more padding than
.space--2at the top and bottom of the element.
.space--top- Apply padding at the top of the element.
.space--top--2- Apply a little more padding than
.space--topat the top of the element.
.space--top--3- Apply more padding than
.space--top--2at the top of the element.
.space--bottom- Apply padding at the bottom of the element.
.space-bottom---2- Apply a little more padding than
.space--bottomat the bottom of the element.
.space-bottom--3- Apply more padding than
.space--bottom--2at the bottom of the element.
Margin and Padding for elements
The classes are named using the format {property}{sides}-{size}
Where property is one of:
m- for classes that setmarginp- for classes that setpadding
Where sides is one of:
t- for classes that setmargin-toporpadding-topb- for classes that setmargin-bottomorpadding-bottoml- for classes that setmargin-leftorpadding-leftr- for classes that setmargin-rightorpadding-right
Where size is one of:
1- for classes that eliminate themarginorpaddingby setting it to10px2- for classes that eliminate themarginorpaddingby setting it to20px3- for classes that eliminate themarginorpaddingby setting it to30px4- for classes that eliminate themarginorpaddingby setting it to40px5- for classes that eliminate themarginorpaddingby setting it to50px6- for classes that eliminate themarginorpaddingby setting it to60px7- for classes that eliminate themarginorpaddingby setting it to70px8- for classes that eliminate themarginorpaddingby setting it to80px9- for classes that eliminate themarginorpaddingby setting it to90px10- for classes that eliminate themarginorpaddingby setting it to100px
Example
<section class="space bg-dark">
<div class="container">
<div class="row">
<div class="col-12 col-lg-10 mx-auto d-flex flex-column flex-md-row justify-content-between text-center">
<span class="mb-3 mb-md-0"><img src="img/logo-1.png" alt="client"></span>
<span class="mb-3 mb-md-0"><img src="img/logo-2.png" alt="client"></span>
<span class="mb-3 mb-md-0"><img src="img/logo-3.png" alt="client"></span>
<span class="mb-3 mb-md-0"><img src="img/logo-4.png" alt="client"></span>
<span class="mb-3 mb-md-0"><img src="img/logo-5.png" alt="client"></span>
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</section>
<div class="card">
<div class="py-3 pl-2">
<span class="icon--lg bg-color--primary color--white rounded--full mx-1">
<i class="icon icon-key"></i>
</span>
<span class="icon--lg bg-color--primary color--white rounded--full mx-1">
<i class="icon icon-logo-dropbox"></i>
</span>
<span class="icon--lg bg-color--primary color--white rounded--full mx-1">
<i class="icon icon-logo-dribbble"></i>
</span>
</div>
</div>