Footer
The native <footer> element ships with sensible flex defaults - headings inherit color and lose their default margins, and a lone paragraph stretches full width.
Basic footer
Every <footer> is a flex container by default. Compose it with spacing, color, and flex utilities exactly like any other element.
Preview
<footer class="bg-dark text-white px-4 py-3 justify-between">
<span class="fw-700">ArchCSS</span>
<span class="font-12">© 2026</span>
</footer>Headings inherit color
Any h1–h6 inside a footer drops its default margin and inherits currentColor, so it blends into a colored footer without extra overrides.
<footer class="bg-primary text-white px-4 py-4 flex-col">
<h4>Stay in touch</h4>
<p>No extra margin/color overrides needed.</p>
</footer>Transparent footer
Add .bg-none to strip the background and border, useful when a footer sits on top of a colored page section.
<footer class="bg-none px-4 py-3">
<span>No background, no border</span>
</footer>Reference
| Selector | Behavior |
|---|---|
footer | display: flex; align-items: center; |
footer h1…h6 | color: inherit; no default margin |
footer p:only-child | Stretches to width: 100% with no margin |
footer.bg-none | Removes background color and border |