Spacing

It is important to give appropriate space between elements. Most elements/classes that we built have pre-defined spacing properties. If you are not satisfied with default spacing properties, you may use the classes below to manually adjust the spacing.

Margin and padding

You can control the spacing between elements by either padding or margin. Although they do similar things in CSS, they are not quite the same, and the image on the right may give you a general idea of the difference between these two.

Padding is used to create space around an element's content, inside of any defined borders.
Margin is used to create space around two elements, outside of any defined borders.

For example, if you feel the borders of two elements are too close to each other, you should increase the margin; if you feel the element's content is too close its border, you should increase the padding.

General
Customisation
Use cases

Overview

You have full control over both margins and paddings. We've built various spacing classes for you to use, and they all follow this notation:

{property}{sides*}-{size} *Sides is an optional field.

Where property can be one of:

m: stands for margin
p: stands for padding

Where sides can be one of:

t: stands for top
b: stands for bottom
l: stands for left
r: stands for right
x: stands for x-axis, this will set both l and r.
y: stands for y-axis, this will set both t and b.
blank: this will set all four sides: t, b, l, r.

Where size can be one of:

0: set the spacing size to 0px
1: set the spacing size to 10px
2: set the spacing size to 20px
3: set the spacing size to 30px
4: set the spacing size to 40px
5: set the spacing size to 50px
auto (margin only): set margin to auto.

Examples

Below are a few examples to help you understand the spacing class better:

Example 1: <div class="p-0">

Remove all paddings (on 4 sides) from the element inside.

Example 2: <div class="pb-3">

Replace the current padding-bottom setting to 30px.

Please note: if the element's padding-bottom size is 30px by default, adding this class will not make any difference.

Example 3: <div class="mx-2">

Replace the current setting on margin-left and margin-right to 20px.

If you want to learn more about advanced spacing classes, please view the 'Customisation' tab.

If you want to learn more about how to apply these spacing classes, please view the 'Use cases' tab.

Customisation

In this section, we will explain advanced spacing classes.

Responsive design

In the previous 'General' tab, we've covered the basic class notation, which will apply to all screen sizes. But in case if you would like to apply different spacing to the different viewport, you can achieve it with this format:

{property}{sides*}-{breakpoint}-{size}

Where breakpoint can be one of:

sm: stands for small screen size, which is ≥ 576px
md: stands for medium screen size, which is ≥ 768px
lg: stands for large screen size, which is ≥ 992px
xl: stands for m screen size, which is ≥ 1200px

Example 1: <div class="mt-md-3">

When the screen size is bigger or equal to 768px, set margin-top size to 30px.

Example 2: <div class="mt-md-3 mt-sm-1">

When the screen size is bigger or equal to 768px, set margin-top size to 30px, and when the screen size is < 768px, set margin-top size to 10px.

If you are not familiar with breakpoints, please go through Grid layouts and Responsive design.

Negative margin

In CSS, margin properties can utilise negative values (not applicable to paddings). The notation of having a negative margin is quite similar to our basic notation, you just need to append 'n' before the {size}.

{property}{sides*}-n-{size}

Example 1: <div class="mt-n-1">

Set margin-top size to -10px.

Gutter

Our grid system has default gutter between each column. In case you want to increase or decrease the gutter size, you can use the following classes to achieve this.

g-{size}

Where size can be one of:

0: set the gutter size to 0rem
1: set the gutter size to 0.25rem
2: set the gutter size to 0.5rem
3: set the gutter size to 1rem
4: set the gutter size to 1.5rem
5: set the gutter size to 3rem

See below as an example:


                        <div class="container">
                            <div class="row py-3">
                                <div class="col-6"><div class="p-3">col-6</div></div>
                                <div class="col-6"><div class="p-3">col-6</div></div>
                            </div>
                            <div class="row py-3 g-0">
                                <div class="col-6"><div class="p-3">col-6</div></div>
                                <div class="col-6"><div class="p-3">col-6</div></div>
                            </div>
                        </div>

col-6

In this example, we can see there was a default gutter between columns. It indicates the default gutter is not zero. If you want to make two columns adjacent to each other, you may want to add g-0 as a class.

Examples

Below are a few examples to help you understand the code structure better.

Example 1: set margin size of 20px to all 4 sides.

<div class="m-2">

Example 2: set padding size of 20px to all 4 sides.

<div class="p-2">

Example 3: use mx-auto to place a 50% wide container in the centre.

<div class="mx-auto">

Example 4: when the screensize is ≥ 768px, set padding-left and padding-right size to 30px.

<div class="py-md-3">

1. Introduction

Most elements in your website will have the appropriate spacing built into the styles by default. In some cases, you might want to adjust the spacing a little. The following classes allow you to do this.

2. Margin and Padding

In your websites, margin is the space around an element's border, while padding is the space between an element's border and the element's content.

For example, if you feel the border is too close to the other element, you should decrease the margin. While the padding should be increased when the content is too close to the border.

Notation

The classes are named using the format {property}{sides}-{size}.

If you would like to apply different spacing to different viewport, you can also use the format {property}{sides}-{breakpoint}-{size}for class names.

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
x - for classes that set both *-left or *-right
y - for classes that set both *-top or *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to 10px
2 - (by default) for classes that set the margin or padding to 20px
3 - (by default) for classes that set the margin or padding to 30px
4 - (by default) for classes that set the margin or padding to 40px
5 - (by default) for classes that set the margin or padding to 50px
auto - for classes that set the margin to auto

Where breakpoint is one of sm, md, lg, xl.

Applying classes

Spacing classes can be applied as class="style" to any element. When there is already a class present, use a space before adding the next one. Some examples:

<div class="container">
        <div class="row mb-3 pl-1">  This will create a margin on the bottom for 30px and a padding on the left for 10px
            <div class="col px-2">  This will create paddings on both left and right side for 20px           
                </div>   
        </div>              
</div>

Examples

<div class="m-2">

<div class="p-2">

<div class="mx-auto">

<div class="py-md-3">

Negative margin

In CSS, margin properties can utilize negative values (padding cannot).
The syntax is nearly the same as the default, positive margin utilities, but with the addition of n before the requested size. Here’s an example class that’s the opposite of .mt-1:

.mt-n-1 {
    margin-top: -10px !important;
}

3. Gutter

The grid columns come with a default gutter between them. When you are using them, you may want to increase or eliminate the gutter. In this scenario, here are the classes you can use:

The notation is similar to the margins and paddings. We use the format {property}-{size} for class names. The property for Gutter is g It is also using the same notation for {size} as described above.

Here are the examples:


                <div class="container">
                    <div class="row py-3">
                        <div class="col-6"><div class="p-3">col-6</div></div>
                        <div class="col-6"><div class="p-3">col-6</div></div>
                    </div>
                    <div class="row py-3 g-0">
                        <div class="col-6"><div class="p-3">col-6</div></div>
                        <div class="col-6"><div class="p-3">col-6</div></div>
                    </div>
                </div>

col-6

In this example, we can see even we didn't specify the gutter, there is a space between column items. It indicates the default gutter is not zero. If you want to make two columns adjacent to each other, you may want to add g-0 as a class.