Spacing

vAPP 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 vAPP

Open Bootstrap Default Spacing

How 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 .space at the top and bottom of the element.

.space--3: Apply more padding than .space--2 at the top and bottom of the element.

.space--4: Apply more padding than .space--3 at the top and bottom of the element.

.space--5: Apply more padding than .space--4 at the top and bottom of the element.

.space--6: Apply more padding than .space--5 at 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--top at the top of the element.

.space--top--3: Apply more padding than .space--top--2 at the top of the element.

.space--top--4: Apply more padding than .space--top--3 at the top of the element.

.space--top--5: Apply more padding than .space--top--4 at the top of the element.

.space--top--6: Apply more padding than .space--top--5 at 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--bottom at the bottom of the element.

.space--bottom--3: Apply more padding than .space--bottom--2 at the bottom of the element.

.space--bottom--4: Apply more padding than .space--bottom--3 at the bottom of the element.

.space--bottom--5: Apply more padding than .space--bottom--4 at the bottom of the element.

.space--bottom--6: Apply more padding than .space--bottom--5 at 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 set margin
p - for classes that set padding

Where sides is one of:

t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right

Where size is one of:

10 - for classes that eliminate the margin or padding by setting it to 10px
20 - for classes that eliminate the margin or padding by setting it to 20px
30 - for classes that eliminate the margin or padding by setting it to 30px
40 - for classes that eliminate the margin or padding by setting it to 40px
50 - for classes that eliminate the margin or padding by setting it to 50px
60 - for classes that eliminate the margin or padding by setting it to 60px
70 - for classes that eliminate the margin or padding by setting it to 70px
80 - for classes that eliminate the margin or padding by setting it to 80px
90 - for classes that eliminate the margin or padding by setting it to 90px
100 - for classes that eliminate the margin or padding by setting it to 100px

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-30 mb-md-0"><img src="img/brand-logo-blue-white.png" alt="client"></span>
                                                            <span class="mb-30 mb-md-0"><img src="img/brand-logo-blue-white.png" alt="client"></span>
                                                            <span class="mb-30 mb-md-0"><img src="img/brand-logo-blue-white.png" alt="client"></span>
                                                            <span class="mb-30 mb-md-0"><img src="img/brand-logo-blue-white.png" alt="client"></span>
                                                            <span class="mb-30 mb-md-0"><img src="img/brand-logo-blue-white.png" alt="client"></span>
                                                        </div>
                                                        <!-- end of col -->
                                                    </div>
                                                    <!-- end of row -->
                                                </div>
                                                <!-- end of container -->
                                            </section>


                                            <div class="card">
                                                <div class="py-30 pl-20">
                                                    <span class="icon--lg bg-color--primary color-white rounded--full mx-10">
                                                        <i class="nc-icon nc-apple"></i>
                                                    </span>
                                                    <span class="icon--lg bg-color--primary color-white rounded--full mx-10">
                                                        <i class="nc-icon nc-ic_android_48px"></i>
                                                    </span>
                                                    <span class="icon--lg bg-color--primary color-white rounded--full mx-10">
                                                        <i class="nc-icon nc-p-heart"></i>
                                                    </span>
                                                </div>
                                            </div>