Skip to content

Footers

Site footers with links, social icons and legal info.

4 component(s)

Dark Footer with App Badges – Tailwind CSS footers preview

Dark Footer with App Badges

Dark Tailwind CSS footer with four link columns, App Store and Google Play badges, and a language select that remembers the choice.

Tailwind CSS Footers
Simple Centered Footer – Pure CSS footers preview

Simple Centered Footer

Minimal centered footer in pure CSS with a logo, tagline, links with animated underlines, round icon links and an auto-updating copyright year.

Pure CSS Footers
Footer with Newsletter – Bootstrap 5 footers preview

Footer with Newsletter

Dark Bootstrap 5 footer with a newsletter signup panel, email validation, social icons, three link columns and a legal bar.

Bootstrap 5 Footers
Multi-Column Footer – Tailwind CSS footers preview

Multi-Column Footer

Dark Tailwind CSS website footer with brand block, social icons, four labelled link columns and a bottom bar with copyright and status.

Tailwind CSS Footers

What is a website footer?

A footer is the section at the bottom of every page. It typically holds secondary navigation, contact details, social media links, a newsletter signup, language or region selectors and legal information such as copyright, privacy policy and imprint links. Footers range from a single line with a copyright notice to multi-column layouts with grouped links, used on marketing sites, online stores, SaaS products and blogs.

When to use a footer

Almost every site needs one. Use it for links that people look for but that do not belong in the main navigation, and keep it consistent across all pages.

Best practices

  • Use the <footer> element at page level; it becomes a landmark that screen reader users can jump to.
  • Group link columns under headings and wrap each group in a <nav> with an aria-label, or use plain lists if they are not navigation.
  • Give icon-only social links an accessible name, for example aria-label="Instagram".
  • Footer text is often small and muted; make sure it still meets contrast requirements.
  • Collapse multi-column layouts into fewer columns or stacked groups on mobile; some designs use collapsible sections there.
  • Keep tap targets at a comfortable size and leave enough spacing between links.
  • If you include a newsletter form, label the email field properly.

Bootstrap, Tailwind CSS and pure CSS versions

Footer examples are available in Bootstrap 6, Bootstrap 5, Tailwind CSS and pure CSS. Bootstrap versions use the grid, nav and list utilities, and Bootstrap 6 variants use the theme-* colour roles so light and dark footers follow your theme. Tailwind CSS versions are built entirely with utilities, and pure CSS versions use CSS Grid or Flexbox with custom properties. Filter by framework, check each footer in the live preview, then copy the HTML and CSS from the code tabs or download it. Replace the links, logo and legal text and the responsive footer is ready for your site.