Section Spacing
Utility classes to provide responsive vertical spacing to sections of a page template.
Section Spacing
.section-space 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="section-space">
<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 component. SASS variables $sec-space-bottom, $sec-space-top, $sec-space-lg-multiplier, $sec-space-sm-multiplier control the base spacing sizes and multipliers for the larger and smaller scales.
.section-space- top and bottom spacing.section-space-top- top only spacing.section-space-bottom- bottom only spacing.section-space-lg- larger top and bottom spacing.section-space-top-lg- larger top only spacing.section-space-bottom-lg- larger bottom only spacing.section-space-sm- smaller top and bottom spacing.section-space-top-sm- smaller top only spacing.section-space-bottom-sm- smaller bottom only spacing
Section Spacing Bottom Only
.section-space-bottom class provides only bottom spacing to section.
Section Spacing Top Only
.section-space-bottom class provides only top spacing to section.
Section Spacing Sizes
Large Section Spacing
.section-space-lg class provides larger vertical spacing to section. .section-space-lg-bottom and .section-space-lg-top classes are also available for single-sided spacing.
Small Section Spacing
.section-space-sm class provides smaller vertical spacing to section. .section-space-sm-bottom and .section-space-sm-top classes are also available for single-sided spacing.