Section Spacing
Utility classes to provide responsive vertical spacing to sections of a page template.
Section Spacing
.sec-spacing class provides vertical spacing to section. This class typically lives on the section allowing the block to support background color classes.
Note: In these examples the spacing is shown in a blue color () for easier visualization.
<section class="sec-spacing">
<div class="container">
<div class="row">
<div class="col">
<!-- Section Content -->
</div>
</div>
</div>
</section>
Supported Spacing Classes
This is a list of classes supported by this utility.
.sec-spacing- top and bottom spacing.sec-spacing-top- top only spacing.sec-spacing-bottom- bottom only spacing.sec-spacing-lg- larger top and bottom spacing.sec-spacing-top-lg- larger top only spacing.sec-spacing-bottom-lg- larger bottom only spacing.sec-spacing-sm- smaller top and bottom spacing.sec-spacing-top-sm- smaller top only spacing.sec-spacing-bottom-sm- smaller bottom only spacing
Section Spacing Bottom Only
.sec-spacing-bottom class provides only bottom spacing to section.
Section Spacing Top Only
.sec-spacing-top class provides only top spacing to section.
Section Spacing Sizes
Large Section Spacing
.sec-spacing-lg class provides larger vertical spacing to section. .sec-spacing-lg-bottom and .sec-spacing-lg-top classes are also available for single-sided spacing.
Small Section Spacing
.sec-spacing-sm class provides smaller vertical spacing to section. .sec-spacing-sm-bottom and .section-space-sm-top classes are also available for single-sided spacing.