Bootstrap 5Navigation

Bootstrap 5 Multi-Column Footer

A multi-column footer is a Bootstrap 5 layout pattern that divides the page footer into two or more columns, each containing a distinct group of links, contact details, social icons, or brand information. It is best used on sites with enough content categories to justify organised navigation at the bottom of every page, such as e-commerce stores, SaaS products, agencies, and content-heavy blogs. The component relies on Bootstrap's grid system to stack columns responsively on small screens and spread them horizontally on larger viewports.

Primary Class

.footer-columns

Common Use Cases

→A SaaS product site using four columns to separate Product links, Company information, Legal pages, and a newsletter signup form so users can find support docs or pricing without scrolling back to the header.
→An e-commerce store splitting the footer into Shop categories, Customer Service links, Payment method icons, and a store locator address block to reduce support queries about returns and shipping policies.
→A digital agency footer with columns for Services offered, Recent case studies, Office contact details, and social media profile links, reinforcing brand credibility on every page.
→A news or media publication footer grouping Editorial sections, Subscription options, Advertise With Us contact info, and regional edition links to serve both readers and B2B partners from a single footer.

Variants & Classes

Variant	Description	Classes
Multi-Column Footer Default	Standard multi-column footer with Bootstrap's default styling.	`footer-columns`
Multi-Column Footer Responsive	Responsive variant that adapts to different screen sizes.	`footer-columns footer-columns-responsive`

Code Example

<footer class="bg-dark text-light pt-5 pb-4">
  <div class="container">
    <div class="row gy-4">

      <!-- Brand column -->
      <div class="col-12 col-md-4">
        <h5 class="fw-bold mb-3">Northfield Studio</h5>
        <p class="text-secondary small">We design and build digital products for startups and scale-ups. Based in Edinburgh, working globally.</p>
        <div class="d-flex gap-3 mt-3">
          <a href="#" class="text-light" aria-label="Twitter"><i class="bi bi-twitter-x"></i></a>
          <a href="#" class="text-light" aria-label="LinkedIn"><i class="bi bi-linkedin"></i></a>
          <a href="#" class="text-light" aria-label="GitHub"><i class="bi bi-github"></i></a>
        </div>
      </div>

      <!-- Services column -->
      <div class="col-6 col-md-2">
        <h6 class="text-uppercase fw-semibold mb-3 small tracking-wide">Services</h6>
        <ul class="list-unstyled mb-0">
          <li class="mb-2"><a href="#" class="text-secondary text-decoration-none">UX Design</a></li>
          <li class="mb-2"><a href="#" class="text-secondary text-decoration-none">Web Development</a></li>
          <li class="mb-2"><a href="#" class="text-secondary text-decoration-none">Brand Identity</a></li>
          <li class="mb-2"><a href="#" class="text-secondary text-decoration-none">SEO Audits</a></li>
        </ul>
      </div>

      <!-- Company column -->
      <div class="col-6 col-md-2">
        <h6 class="text-uppercase fw-semibold mb-3 small">Company</h6>
        <ul class="list-unstyled mb-0">
          <li class="mb-2"><a href="#" class="text-secondary text-decoration-none">About Us</a></li>
          <li class="mb-2"><a href="#" class="text-secondary text-decoration-none">Careers</a></li>
          <li class="mb-2"><a href="#" class="text-secondary text-decoration-none">Blog</a></li>
          <li class="mb-2"><a href="#" class="text-secondary text-decoration-none">Contact</a></li>
        </ul>
      </div>

      <!-- Contact column -->
      <div class="col-12 col-md-4">
        <h6 class="text-uppercase fw-semibold mb-3 small">Get in Touch</h6>
        <p class="text-secondary small mb-1">hello@northfieldstudio.co.uk</p>
        <p class="text-secondary small mb-1">+44 131 000 1234</p>
        <p class="text-secondary small">14 Princes Street, Edinburgh, EH2 2BY</p>
      </div>

    </div>

    <hr class="border-secondary mt-4 mb-3">

    <div class="row align-items-center">
      <div class="col-md-6 text-center text-md-start">
        <p class="small text-secondary mb-0">&copy; 2025 Northfield Studio Ltd. All rights reserved.</p>
      </div>
      <div class="col-md-6 text-center text-md-end mt-2 mt-md-0">
        <a href="#" class="text-secondary text-decoration-none small me-3">Privacy Policy</a>
        <a href="#" class="text-secondary text-decoration-none small">Terms of Service</a>
      </div>
    </div>

  </div>
</footer>

Live Examples

Basic Multi-Column Footer

Example 1

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Canvas Builder generated multi-column footer with custom colours
✓Multi-Column Footer with interactive states
✓Responsive multi-column footer for all screen sizes

Best Practices

Use col-6 on mobile to keep link columns side-by-side

Assigning col-6 col-md-2 to your link columns prevents them from stacking into a single tall list on mobile, which wastes vertical space. Reserve col-12 for the brand and contact columns where the content genuinely needs full width.

Add gy-4 to the row to control vertical spacing between stacked columns

Bootstrap 5's gutter utility gy-4 adds consistent vertical gap between columns when they stack on small screens, eliminating the need for custom margin hacks on each column.

Separate the copyright bar with a border-secondary hr

A horizontal rule with the border-secondary class provides a subtle visual break between the link columns and the legal bottom bar, making the footer feel structured without adding extra background colour blocks.

Use text-uppercase with a small font-size for column headings

Combining text-uppercase, fw-semibold, and small on footer column headings creates clear section labels that do not compete visually with the site's primary headings, which is a standard pattern in production footers.

FAQ

How do I make the footer columns stack in a specific order on mobile?

Bootstrap 5 stacks grid columns in source order by default. If you want the brand column to appear last on mobile but first on desktop, use the order utility classes: add order-last order-md-first to the brand column and order-first order-md-last to the column you want at the top on small screens. This avoids changing your HTML structure and keeps the semantic order intact for screen readers.

How can I change the footer background and link colours to match my brand?

Replace bg-dark and text-light with custom utility classes or override Bootstrap's CSS variables. For example, set --bs-body-bg on the footer element with an inline style or a custom CSS class to apply a brand colour without touching the Bootstrap source. For links, either create a utility class like .footer-link with a specific color and hover state, or use Bootstrap's text-* utilities if your brand colour is already mapped to a theme colour in your SCSS configuration.

How does Canvas Builder generate a multi-column footer for my site?

When you describe your site to Canvas Builder, it reads your content structure and automatically determines the appropriate number of footer columns based on the links and information you provide. It applies your brand colours to the footer background and link styles, outputs fully responsive Bootstrap 5 grid markup with correct breakpoint classes, and includes a copyright bar with placeholder legal links. The generated code is production-ready HTML that you can paste directly into any Bootstrap 5 project.