Spacing

Use our different classes to space your elements.

Container class

The .container class is creating a container, creating a responsive margin around it.
Basic width is 75%, 85% on tablets, and 90% on smartphones.

Card header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Non veritatis excepturi natus impedit distinctio quidem, nesciunt id possimus quia, tempore fuga doloribus reiciendis facilis voluptate accusantium! Adipisci est nam soluta!

Card header

Margins & paddings

Spacings are paddings and margins that allow you to space your elements.
They are working with the base space of a 1rem, $base-space: 1rem used for every space variant.
You can custom the $base-space variable by downloading the source files.

Space number	Real space
0	`0rem`
1	`0.25rem`
2	`0.5rem`
3	`1rem`
4	`1.5rem`
5	`2.5rem`

Margins

Name	Effect
`m-0` to `m-5`	Set all the margins of the element to 0.
`mx-0` to `mx-5`	Set the left and right margins of the element.
`my-0` to `my-5`	Set the top and bottom margins of the element.
`mt-0` to `mt-5`	Set the top margin of the element.
`mr-0` to `mr-5`	Set the right margin of the element.
`mb-0` to `mb-5`	Set the bottom margin of the element.
`ml-0` to `ml-5`	Set the left margin of the element.

Paddings

Name	Effect
`p-0` to `p-5`	Set all the paddings of the element.
`px-0` to `px-5`	Set the left and right paddings of the element.
`py-0` to `py-5`	Set the top and bottom paddings of the element.
`pt-0` to `pt-5`	Set the top padding of the element.
`pr-0` to `pr-5`	Set the right padding of the element.
`pb-0` to `pb-5`	Set the bottom padding of the element.
`pl-0` to `pl-5`	Set the left padding of the element.

Auto spacing

You can add the auto suffix to create an auto spacing.
Examples :

mt-auto will add an automatic margin on the top of the element.
mx-auto will add an automatic margin on the left and right of the element.