Does Bootstrap Have a Footer Component?
No. The 5.3 documentation lists 24 components, from Accordion to Tooltips, and Footer isn’t one of them. Spacing, layout and color all come from classes you pick yourself.
The docs do give you something to start from. The Examples section has a Footers page of copy-paste layouts with link rows, social icon rows and a newsletter form. There’s also a sticky footer template that holds the footer at the bottom of short pages, plus a second version of it built for a fixed top navbar.
Third-party template pages, MDBootstrap among them, say the official documentation has no footer component. They’re right about the component list. What they miss is a small version detail: the Bootstrap 5.0 Examples page has no Footers group, while the 5.1, 5.2 and 5.3 pages do.
Cards, modals and the rest of the Bootstrap components come with documented class names and markup. A footer doesn’t, which is why the next sections build one piece by piece.
How Do You Build a Basic Bootstrap Footer?
Start with a footer element, a container inside it, some vertical padding and a background or text color class. That’s the whole basic version.
- Load the Bootstrap 5.3 stylesheet. Bootstrap’s own CDN starter example pulls the compiled CSS from jsDelivr, so one link tag in the head does it.
- Add a footer element after the main content and give it
bg-dark text-white. - Place a
.container inside it. Containers center their content and pad it horizontally, so text neither touches the screen edge nor stretches across a wide monitor. - Add
py-3 or py-4 to the footer. The container only pads the sides, so the vertical space has to come from a padding utility. - Add
text-center to center the line. For a two-sided footer, use d-flex justify-content-between instead. - Put the copyright line in a paragraph with
mb-0, otherwise the paragraph margin adds extra space under it.
<footer class="bg-dark text-white py-3">
<div class="container text-center">
<p class="mb-0">Copyright 2026 Company, Inc.</p>
</div>
</footer>
The padding utilities come out of the $spacers Sass map through the utilities API. Per the Bootstrap spacing docs, py-3 equals one default $spacer (1rem) and py-4 works out to 1.5rem.
The default container tops out at 1320px from the xxl breakpoint. On a wide monitor the background still spans the viewport while the content stays in a centered column.
Use .container-fluid when the content should stretch too.
How Do You Lay Out a Multi-Column Footer With the Grid?
Put a row inside the footer container and give each column a breakpoint class such as col-md-3. Below that breakpoint the columns stack, and from the breakpoint up they sit side by side.
Every row divides into 12 template columns in Bootstrap’s twelve-column grid system, so four equal link groups take col-md-3 and three take col-md-4. It all runs on flexbox, which is why one set of col-md-* classes starts stacked and goes horizontal at md.
The md breakpoint begins at 768px. Bootstrap writes its breakpoints as min-width media queries, so the mobile-first approach is the default and the stacked layout needs no class at all.
A footer built from plain col classes is never responsive. Those columns stay side by side from the smallest phone up, which is why I’d leave them out of footers.
The row-columns shortcut sets the count on the row instead. row row-cols-1 row-cols-sm-2 row-cols-md-4 gives one column on phones, two from sm and four from md, per the Bootstrap grid docs.
The md container is 720px wide and the gutter is 1.5rem, which is 24px at the default root size. Divide that out and three columns (col-md-4) get 240px each, with 216px usable. Four columns (col-md-3) get 180px and 156px usable. Six (col-md-2) are down to 120px, and only 96px of that is usable.
Six columns at 96px break long link labels. Hold six-column footers back until lg (960px container, 136px usable) and treat four as the ceiling for tablets.
Stacked columns touch unless the row adds vertical gutters. Add gy-4 to the row, or g-4 for both directions, so link groups keep their spacing on phones.
How Do You Keep a Bootstrap Footer at the Bottom of the Page?
Use the flex column method for ordinary footers. fixed-bottom is for short bars that have to stay visible, and “sticky footer” gets used for both even though they behave differently.
Bootstrap’s Examples pages (5.0 through 5.3) describe the first one, a footer attached to the bottom of the viewport when page content is short. MDBootstrap’s footer docs mean something else by the term: a footer pinned to the bottom of the viewport with fixed-bottom, so it stays put while the user scrolls.
Flex column method
Bootstrap’s sticky footer example puts h-100 on the html element and d-flex flex-column h-100 on the body (the 5.2.3 and 5.3.8 sources match). Inside the body, main takes flex-shrink-0 and the footer takes mt-auto.
The auto margin takes the free space above the footer and pushes it down.
On a long page there is no free space, so the footer simply follows the content.
Fixed-bottom method
The Bootstrap 5.3 position helpers put a warning on fixed-bottom, telling you to understand the ramifications of fixed position since extra CSS may be needed.
In practice the footer leaves the document flow and sits over the last lines of content. The fix is bottom padding on the body that matches the footer’s rendered height. It suits short persistent bars such as consent notices and not much else.
The sticky-bottom helper is a different tool. Bootstrap’s docs say it applies only after you scroll past the element, so it does not pin a page footer.
Pick by what the footer has to do on a short page and on a scrolled one.
| Method | Footer position | Covers content | Best for |
|---|
| Default flow | Right after content, mid-screen on short pages | No | Pages that always fill the screen |
| Flex column with mt-auto | Viewport bottom on short pages, after content on long ones | No | Most site footers |
| fixed-bottom | Always at the viewport bottom | Yes, without body padding | Short persistent bars |
Flex column wins for ordinary site footers. fixed-bottom turns a footer into a toolbar.
Why Is My Bootstrap Footer Not Sticking to the Bottom?
Nearly always one link in the flex column chain is missing, and each missing link gives its own symptom.
- If the footer sits right under short content, html probably has no
h-100. The body’s percentage height then has nothing to resolve against, and Bootstrap’s example sets it on both elements. - If
mt-auto does nothing, the body isn’t d-flex flex-column. Auto margins only push a footer inside a flex container. - If the footer still hugs the content, check that it’s a direct child of the flex container. A wrapper div, such as the root element a JavaScript framework mounts the app in, becomes the flex item instead, so move the flex classes to that wrapper.
- Last lines of content hidden usually means
fixed-bottom with no bottom padding on the page.
The official example describes itself as a desktop browser solution. Check the footer on a phone before shipping.
The method also falls apart on pages whose body is already a CSS grid or a sidebar layout. The body can’t be a flex column there too, so give the footer its own row in that layout instead of relying on mt-auto.
How Do You Style a Bootstrap Footer: Colors, Spacing and Dark Mode?
Set the background with a bg-* class, the text color with text-* (or text-bg-*, which sets both), and scope a dark theme to the footer with data-bs-theme="dark".
The text-bg-* helpers arrived in v5.2. One class sets a background and a contrasting text color, picked by Bootstrap’s Sass color-contrast() function. Color modes came later, in v5.3.0. Put data-bs-theme on the html element and it applies to the whole project, put it on a footer and it stays scoped to that element.
For alignment, text-center text-md-start centers text on phones and left-aligns it from md up. On a flex footer row, gap-3 spaces the children without margin classes on each one.
Link color needs its own decision. Bootstrap’s colored links docs say link-body-emphasis is the only colored link that adapts to color modes (v5.3.8), while AdminLTE’s footer guide (August 2026) lists link-secondary among the classes that re-map under data-bs-theme="dark".
The v5.3.8 source sides with the docs: link-secondary reads the --bs-secondary-rgb theme color, which the dark mode block does not redefine. Use link-body-emphasis or text-body-secondary for footer links that must follow a theme switch, and keep link-secondary for footers that stay in one mode.
Prefer link-* classes over text-* on anchors, because only the link classes carry :hover and :focus states. The light variants such as link-light belong on dark backgrounds only.
The color-contrast() function has no CSS-native equivalent, so overriding theme colors through CSS variables can break the pairing that text-bg-* computed. Recompile the Sass when the brand color changes a theme color, and check any CSS-variable override by hand against the color contrast thresholds.
<footer class="bg-dark text-light py-4" data-bs-theme="dark">
<div class="container d-flex flex-column flex-md-row justify-content-md-between gap-3 text-center text-md-start">
<p class="mb-0">Copyright 2026 Company, Inc.</p>
<a class="link-light" href="#">Privacy</a>
</div>
</footer>
What Should Go Inside a Bootstrap Footer?
Most footers only need two of the usual pieces: link lists, social icons, a newsletter form, a copyright line and contact details. Add the rest when a visitor would actually look for them at the bottom of the page.
Link lists
Render each group of links as a ul with list-unstyled and put a short heading over it.
Labels work best at one word. Add mb-2 to each li for vertical rhythm, and keep the lists a similar length so the columns finish at about the same height.
Bootstrap’s own Footers example sticks to one-word labels (Home, Features, Pricing, FAQs, About), which keeps narrow columns from wrapping.
Social icons
Bootstrap Icons (v1.13.2) ships as SVGs, an SVG sprite or a web font, and installs with npm i bootstrap-icons. Font Awesome Free is the usual alternative.
Either set slots into a footer the same way: one anchor per network with the icon inside, grouped in a flex row with gap-3. The Bootstrap icons guide covers installation in more detail.
Bootstrap Icons is maintained by the Bootstrap team, so the icons match the framework’s look, and it works with or without Bootstrap’s CSS. The catch is the web-font build, which loads the full set. Use single SVGs when the footer needs only a handful of icons.
Font Awesome Free is a free download packaged as SVG, JS and web font files. The licensing is split, with icons under CC BY 4.0, fonts under SIL OFL 1.1 and code under MIT, and attribution is required (the files carry embedded attribution comments). Pro styles need a paid commercial license.
Pick Bootstrap Icons when the page already loads Bootstrap CSS. Reach for Font Awesome only when the design needs a glyph the other set lacks.
Brand icons are trademarks of their owners, and Font Awesome’s license asks that a logo represent only the company it belongs to. Link each icon to that company’s own profile.
Newsletter form
You can build the field yourself or paste a provider’s embed code.
Bootstrap’s form classes handle the field and the button, a form-control input and a btn in a flex row.
<form class="d-flex gap-2" action="#" method="post">
<label for="footer-email" class="visually-hidden">Email address</label>
<input type="email" class="form-control" id="footer-email" required>
<button class="btn btn-primary flex-shrink-0" type="submit">Subscribe</button>
</form>
The action must point at your email provider. AdminLTE’s newsletter example adds flex-shrink-0 to the button so it holds its width on narrow screens.
Mailchimp’s help docs flag a few problems with embeds. Embedded forms inherit the site’s stylesheet, so Bootstrap’s rules can change how the form looks compared with Mailchimp’s preview. Deleting a required field from the embed code makes the form submit with errors. And since the embed code carries its own form tag, it can’t sit inside another form element.
Copyright line and contact details
Keep the copyright line small and last.
Put it in a bottom strip with the Privacy and Terms links, separated from the navigation by a border.
MDN’s footer reference places author information in an address element inside the footer, which suits contact details. Make phone numbers and emails tappable with tel: and mailto: links, as AdminLTE’s contact footer does.
How Do You Make a Bootstrap Footer Accessible?
Bootstrap’s accessibility docs say the result depends on the author’s markup, styling and scripting, so the framework won’t do this for you. In a footer it comes down to the landmark, accessible names, text contrast and target size.
On the landmark, a footer outside article, aside, main, nav and section maps to the contentinfo landmark, and a nested one becomes generic (MDN). Keep one contentinfo landmark per page and label each one if there are several.
Every icon-only link needs an accessible name. Every nav in the footer (“Footer”, “Legal”) needs its own label too, so landmark lists can tell them apart.
For contrast, WCAG 2.2 criterion 1.4.3 asks for 4.5:1 on normal text (W3C). Bootstrap’s docs warn that some default palette pairings fall below that, particularly on light backgrounds.
Target size is criterion 2.5.8, which asks for targets of at least 24 by 24 CSS pixels, or enough space around smaller ones. Links inside a sentence are exempt, but a list of footer links is not.
An ARIA label on the anchor names an icon link, as in AdminLTE’s footer examples. Bootstrap’s own alternative is text inside a .visually-hidden span.
Brand-colored icons are a visual cue only, so the accessible name has to carry the meaning. Add role="contentinfo" to the footer only if you must support Safari before version 13, where VoiceOver did not expose the landmark (MDN).
Gray-on-dark pairs fail more easily than they look, so measure each one. For link lists, add padding or spacing to each item until every link has the size or the room the criterion needs.
Run the finished footer through a web accessibility checklist as well, since the footer is one landmark among several on a page.
Which Bootstrap Footer Template Should You Use?
Hand-build a footer that needs one row or a few columns. Copy a template only for patterns you wouldn’t write quickly, such as a mega footer with a call-to-action band.
| Source | What you get | Catch |
|---|
| Bootstrap Footers examples (5.3) | Official copy-paste layouts in Bootstrap’s own classes | Small set of layouts |
| AdminLTE (18 examples, Aug 2026) | Bootstrap 5.3 utility markup, no custom stylesheet (a few inline styles) | Needs 5.3 for bg-body-* tokens; assumes Bootstrap Icons |
| Colorlib (22 templates, Sept 2026) | Downloadable plain HTML and CSS footers | No Bootstrap files included; download asks for an email address |
| MDBootstrap | Large set of styled footers | Tied to the MDB kit, not core Bootstrap alone |
Names mislead here. Colorlib’s 2025 roundup carried Bootstrap in its title, and its September 28, 2026 edition says those footers were rebuilt as plain HTML and CSS that run alone or inside a Bootstrap 4, 5 or 6 project.
Before pasting anything, check the Bootstrap version, since the bg-body-* tokens need 5.3. Icon classes such as bi bi-* need the icon library loaded. The sticky pattern differs too. AdminLTE’s example puts d-flex flex-column min-vh-100 on the body, while Bootstrap’s own example sets h-100 on html and body, so test either one on your layout. AdminLTE’s guide also says most snippets skip accessibility details, so check labels and contrast yourself.
A utility-built footer adds no files, because the classes already ship in Bootstrap’s stylesheet. Colorlib lists its newest newsletter footer at a 663 KB download, and since its footers carry their own CSS they behave like any other set of CSS footers.
Start from the official Footers snippets. If they lack the pattern you need, AdminLTE is the next stop. Colorlib or MDB only make sense when you want that vendor’s styling or kit.
Bootstrap Footer FAQ
Does a Bootstrap 5 footer need jQuery?
No. Bootstrap 5.0.0 dropped jQuery and rewrote its plugins in plain JavaScript, so a footer needs no jQuery even when it uses the Collapse plugin for mobile link accordions (Bootstrap migration docs).
What changes when a footer moves from Bootstrap 4 to Bootstrap 5?
Mostly renames. The ml- and mr- prefixes became ms- and me-, text-left became text-start, and float-right became float-end.
Also, sr-only became visually-hidden, form-group was dropped, and JavaScript data attributes gained a bs prefix, per Bootstrap’s migration guide.
How do you show the current year in a copyright line?
With JavaScript. new Date().getFullYear() returns the current year as an integer in local time (MDN).
Write it into a span inside the copyright paragraph, or render the year server-side so it appears without a script.
How do you add a back-to-top link to a footer?
Use an anchor with href=”#top”. HTML treats #top as the top of the document when no element carries that id (WHATWG), and Bootstrap applies smooth scrolling unless the visitor prefers reduced motion.
AdminLTE’s guide adds scroll-behavior: smooth by hand, although Bootstrap’s accessibility docs say Bootstrap already enables it. Label an icon-only link with aria-label.
Does the sticky footer work with a fixed top navbar?
Yes. Bootstrap ships a separate sticky footer navbar example for it, which adds padding-top: 60px to the main container so the fixed navbar doesn’t cover the page content (5.3 example).
Keeping One Bootstrap Footer Consistent Across Pages
Put the footer markup in one shared partial and have every page template include it.
Copying the footer into each file turns a new legal link or a contrast fix into a site-wide find and replace.
Extract the footer into one partial first. Set the landmark and theme attribute there, then test contrast and link spacing once instead of per page.
One shared file also means one mistake reaches every page, so review each edit before deploying. Layouts that differ, such as an admin area and a marketing site, need one partial each.
Bootstrap’s docs defer the color mode rebuild of theme colors to v6. The first Bootstrap 6 alpha (6.0.0-alpha.1) shipped on October 8, 2026 and renames responsive classes such as col-md-3 to md:col-3, so the partial needs a recheck when v6 reaches a stable release (verified against v5.3.8, the current stable release, on October 28, 2026).
The header follows the same pattern, and the Bootstrap navbar belongs in a shared partial beside the footer.