Spacing

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

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.

CSS Class Reference

Spacer for sections

.space
Apply padding at the top and bottom of the element.
.space--md
Apply a little more padding than .space at the top and bottom of the element.
.space--lg
Apply more padding than .space--md at the top and bottom of the element.
.space--xl
Apply much more padding than .space--lg at the top and bottom of the element.

.space-top
Apply padding at the top of the element.
.space-top--md
Apply a little more padding than .space-top at the top of the element.
.space-top--lg
Apply more padding than .space-top--md at the top of the element.
.space-top--xl
Apply much more padding than .space-top--lg at the top of the element.

.space-bottom
Apply padding at the bottom of the element.
.space-bottom--md
Apply a little more padding than .space-bottom at the bottom of the element.
.space-bottom--lg
Apply more padding than .space-bottom--md at the bottom of the element.
.space-bottom--xl
Apply much more padding than .space-bottom--lg 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

client client client client client

                                                <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/logo-1.png" alt="client"></span>
                                                            <span class="mb-30 mb-md-0"><img src="img/logo-2.png" alt="client"></span>
                                                            <span class="mb-30 mb-md-0"><img src="img/logo-3.png" alt="client"></span>
                                                            <span class="mb-30 mb-md-0"><img src="img/logo-4.png" alt="client"></span>
                                                            <span class="mb-30 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 pt-30 pb-30 pl-20 flex-row">
                                    <span class="icon-rounded mr-10">
                                        <i class="icon icon-pin-3"></i>
                                    </span>
                                    <span class="icon-rounded mr-10">
                                        <i class="icon icon-bill"></i>
                                    </span>
                                    <span class="icon-rounded mr-10">
                                        <i class="icon icon-grid-45"></i>
                                    </span>
                                </div>