Section
The native <section> element is a full-width, horizontally-padded flex column by default, ready to host a background image via the framework's background() mixin.
Basic section
Every <section> is display: inline-flex; flex-direction: column;, width: 100%, with horizontal padding from $section-padding-x baked in.
Preview
Section heading
Full-width column, horizontal padding included by default.
<section class="bg-light py-5">
<h2>Section heading</h2>
<p>Body copy.</p>
</section>Background image
Sections come pre-wired for cover-style background images: background-size: cover; background-repeat: no-repeat; is set by default, so a background-image just needs positioning.
<section style="background-image:url(hero.jpg);" class="py-5 text-white">
<h1>Hero heading</h1>
</section>Stretch modifier
Add .stretch to remove the default horizontal padding - useful when an inner container should control its own gutters, or the section content should run edge-to-edge.
<section class="stretch">
<div class="container mx-auto px-4">...</div>
</section>Reference
| Selector | Behavior |
|---|---|
section | display: inline-flex; flex-direction: column; width: 100%; plus cover-style background defaults and horizontal padding |
section.stretch | Removes horizontal padding (padding: 0) |
Overflow is clipped. Sections set overflow: hidden by default - useful for background images and decorative pseudo-elements, but keep in mind if you rely on child content overflowing intentionally.