Spacing

Adjust default margins and padding with these available classes.

Clears

Remove default margins and padding when needed.

Clear Classes
Class Name Margin/Padding Direction
.clear-margins margin all
.clear-margin-top margin top
.clear-margin-right margin right
.clear-margin-bottom margin bottom
.clear-margin-left margin left
.clear-padding padding all
.clear-padding-top padding top
.clear-padding-right padding right
.clear-padding-bottom padding bottom
.clear-padding-left padding left

Margins

Use margin classes to add or override existing margins.

Margin Classes
Class Name Direction Amount
.margin-xs all 5px
.margin-top-xs top 5px
.margin-right-xs right 5px
.margin-bottom-xs bottom 5px
.margin-left-xs left 5px
.margin-sm all 15px
.margin-top-sm top 15px
.margin-right-sm right 15px
.margin-bottom-sm bottom 15px
.margin-left-sm left 15px
.margin-md all 30px
.margin-top-md top 30px
.margin-right-md right 30px
.margin-bottom-md bottom 30px
.margin-left-md left 30px
.margin-lg all 45px
.margin-top-lg top 45px
.margin-right-lg right 45px
.margin-bottom-lg bottom 45px
.margin-left-lg left 45px
.margin-xl all 60px
.margin-top-xl top 60px
.margin-right-xl right 60px
.margin-bottom-xl bottom 60px
.margin-left-xl left 60px

Padding

Use padding classes to add or override existing padding.

Padding Classes
Class Name Direction Amount
.padding-xs all 5px
.padding-top-xs top 5px
.padding-right-xs right 5px
.padding-bottom-xs bottom 5px
.padding-left-xs left 5px
.padding-sm all 15px
.padding-top-sm top 15px
.padding-right-sm right 15px
.padding-bottom-sm bottom 15px
.padding-left-sm left 15px
.padding-md all 30px
.padding-top-md top 30px
.padding-right-md right 30px
.padding-bottom-md bottom 30px
.padding-left-md left 30px
.padding-lg all 45px
.padding-top-lg top 45px
.padding-right-lg right 45px
.padding-bottom-lg bottom 45px
.padding-left-lg left 45px
.padding-xl all 60px
.padding-top-xl top 60px
.padding-right-xl right 60px
.padding-bottom-xl bottom 60px
.padding-left-xl left 60px

Section Padding Adjustments

By defualt, section containers have 30px top/bottom padding. Devices that are tablet size and larger have 60px top/bottom padding. There are additional classes to reduce this padding. Just add these classes at the <section> container.

Section Padding Classes
Class Padding-top
Phones (<768px)
Padding-bottom
Phones (<768px)
Padding-top
Tablet and larger (≥768px)
Padding-bottom
Tablet and larger (≥768px)
.padding-lg 30px 30px 60px 60px
.padding-top-lg 30px - 60px -
.padding-bottom-lg - 30px - 60px
.padding-md 20px 20px 40px 40px
.padding-top-md 20px - 40px -
.padding-bottom-md - 20px - 40px
.padding-sm 10px 10px 20px 20px
.padding-top-sm 10px - 10px -
.padding-bottom-sm 20px - 20px -
.padding-none 0px 0px 0px 0px
.padding-top-none 0px - 0px -
.padding-bottom-none - 0px - 0px

Column Padding Adjustments

By default, section Bootstrap columns have 15px left/right padding. There are additional classes to reduce this padding. Place these classes on the <div class="row"> container and not on the individual <div class="col-*"> containers. The class will affect the padding of any nested columns.

Column Padding Classes
Class Padding Left/Right
padding-lg
(same as default)
15px
padding-md 10px
padding-sm 5px
padding-none 0px