Open demo

CSS code

HTML 
<footer class="fctr">
  <a class="mark" href="#"><span aria-hidden="true">F</span><span class="sr-only">Fieldnote home</span></a>
  <nav aria-label="Footer">
    <ul class="links"><li><a href="#">Features</a></li><li><a href="#">Pricing</a></li><li><a href="#">Blog</a></li><li><a href="#">Careers</a></li><li><a href="#">Support</a></li></ul>
  </nav>
  <ul class="soc">
    <li><a href="#" aria-label="Fieldnote on X"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4l16 16M20 4L4 20"/></svg></a></li>
    <li><a href="#" aria-label="Fieldnote on GitHub"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 19c-4 1.3-4-2.2-6-2.7m12 5.4v-3.4c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 00-1.3-3.2 4.3 4.3 0 00-.1-3.2s-1-.3-3.4 1.3a11.7 11.7 0 00-6 0C6.7 3.6 5.7 3.9 5.7 3.9a4.3 4.3 0 00-.1 3.2A4.6 4.6 0 004.3 10.3c0 4.6 2.7 5.7 5.5 6-.4.4-.5.9-.5 1.5V21"/></svg></a></li>
    <li><a href="#" aria-label="Fieldnote on LinkedIn"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M8 11v6M8 8v.01M12 17v-3.5a2 2 0 014 0V17"/></svg></a></li>
    <li><a href="#" aria-label="Fieldnote on YouTube"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="2.5" y="5" width="19" height="14" rx="4"/><path d="M10 9.5l4.5 2.5-4.5 2.5z"/></svg></a></li>
  </ul>
  <p class="fine">© Fieldnote Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
</footer>
CSS 
/* Centred footer: logo mark, one row of links, round social buttons and a line of fine print. */
.fctr{--fctr-text:#191c22;--fctr-link:#586070;--fctr-muted:#6b7280;--fctr-line:#e3e6eb;
  border-top:1px solid #eceef1;text-align:center;padding:46px 26px 34px;color:var(--fctr-text);line-height:normal}
.fctr,.fctr *{box-sizing:border-box}
.fctr p,.fctr ul{margin:0;padding:0}
.fctr ul{list-style:none}
.fctr a{text-decoration:none;border-radius:4px}
.fctr a:focus-visible{outline:2px solid var(--fctr-text);outline-offset:3px}
.fctr .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fctr .mark{width:44px;height:44px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;border-radius:13px;
  background:linear-gradient(135deg,#111,#3d4451);color:#fff;font-weight:900}
.fctr .links{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 26px;margin-bottom:22px}
.fctr .links a{font-size:.88rem;font-weight:600;color:var(--fctr-link)}
.fctr .links a:hover{color:var(--fctr-text)}
.fctr .soc{display:flex;justify-content:center;gap:10px;margin-bottom:24px}
.fctr .soc a{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--fctr-line);border-radius:50%;color:var(--fctr-link);
  transition:border-color .15s,color .15s,transform .15s}
.fctr .soc a:hover{border-color:var(--fctr-text);color:var(--fctr-text);transform:translateY(-3px)}
.fctr .soc svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fctr .fine{font-size:.78rem;color:var(--fctr-muted)}
.fctr .fine a{color:inherit}
.fctr .fine a:hover{color:var(--fctr-text);text-decoration:underline}
@media (prefers-reduced-motion:reduce){.fctr *{transition:none!important}.fctr .soc a:hover{transform:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<footer class="fctr text-center">
  <a class="mark" href="#"><span aria-hidden="true">F</span><span class="visually-hidden">Fieldnote home</span></a>
  <nav aria-label="Footer">
    <ul class="links nav justify-content-center"><li class="nav-item"><a class="nav-link" href="#">Features</a></li><li class="nav-item"><a class="nav-link" href="#">Pricing</a></li><li class="nav-item"><a class="nav-link" href="#">Blog</a></li><li class="nav-item"><a class="nav-link" href="#">Careers</a></li><li class="nav-item"><a class="nav-link" href="#">Support</a></li></ul>
  </nav>
  <ul class="soc list-unstyled d-flex justify-content-center gap-2">
    <li><a class="btn" href="#" aria-label="Fieldnote on X"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4l16 16M20 4L4 20"/></svg></a></li>
    <li><a class="btn" href="#" aria-label="Fieldnote on GitHub"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 19c-4 1.3-4-2.2-6-2.7m12 5.4v-3.4c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 00-1.3-3.2 4.3 4.3 0 00-.1-3.2s-1-.3-3.4 1.3a11.7 11.7 0 00-6 0C6.7 3.6 5.7 3.9 5.7 3.9a4.3 4.3 0 00-.1 3.2A4.6 4.6 0 004.3 10.3c0 4.6 2.7 5.7 5.5 6-.4.4-.5.9-.5 1.5V21"/></svg></a></li>
    <li><a class="btn" href="#" aria-label="Fieldnote on LinkedIn"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M8 11v6M8 8v.01M12 17v-3.5a2 2 0 014 0V17"/></svg></a></li>
    <li><a class="btn" href="#" aria-label="Fieldnote on YouTube"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="2.5" y="5" width="19" height="14" rx="4"/><path d="M10 9.5l4.5 2.5-4.5 2.5z"/></svg></a></li>
  </ul>
  <p class="fine mb-0">© Fieldnote Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
</footer>
CSS 
/* A centred .nav for the links, round .btn social icons and .text-center utilities. */
.fctr{--fctr-text:#191c22;--fctr-link:#586070;--fctr-muted:#6b7280;--fctr-line:#e3e6eb;
  border-top:1px solid #eceef1;padding:46px 26px 34px;color:var(--fctr-text);line-height:normal}
.fctr .mark{width:44px;height:44px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;border-radius:13px;
  background:linear-gradient(135deg,#111,#3d4451);color:#fff;font-weight:900;text-decoration:none}
.fctr .links{--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:0;--bs-nav-link-font-size:.88rem;--bs-nav-link-font-weight:600;
  --bs-nav-link-color:var(--fctr-link);--bs-nav-link-hover-color:var(--fctr-text);gap:10px 26px;margin-bottom:22px}
.fctr .nav-link{border-radius:4px}
.fctr .soc{margin-bottom:24px}
.fctr .soc .btn{--bs-btn-padding-x:0;--bs-btn-padding-y:0;--bs-btn-color:var(--fctr-link);--bs-btn-border-color:var(--fctr-line);--bs-btn-border-radius:50%;
  --bs-btn-hover-color:var(--fctr-text);--bs-btn-hover-bg:transparent;--bs-btn-hover-border-color:var(--fctr-text);
  --bs-btn-active-color:var(--fctr-text);--bs-btn-active-border-color:var(--fctr-text);
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s,transform .15s}
.fctr .soc .btn:hover{transform:translateY(-3px)}
.fctr .soc svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fctr .fine{font-size:.78rem;color:var(--fctr-muted)}
.fctr .fine a{color:inherit;text-decoration:none;border-radius:4px}
.fctr .fine a:hover{color:var(--fctr-text);text-decoration:underline}
.fctr a:focus-visible{outline:2px solid var(--fctr-text);outline-offset:3px;box-shadow:none}
@media (prefers-reduced-motion:reduce){.fctr *{transition:none!important}.fctr .soc .btn:hover{transform:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<footer class="border-t border-[#eceef1] px-[26px] pt-[46px] pb-[34px] text-center leading-[normal] text-[#191c22] [&_a]:rounded [&_a:focus-visible]:outline-2 [&_a:focus-visible]:outline-offset-[3px] [&_a:focus-visible]:outline-[#191c22]">
  <a class="mx-auto mb-4 flex size-11 items-center justify-center rounded-[13px]! bg-linear-135 from-[#111] to-[#3d4451] font-black text-white" href="#"><span aria-hidden="true">F</span><span class="sr-only">Fieldnote home</span></a>
  <nav aria-label="Footer">
    <ul class="mb-[22px] flex flex-wrap justify-center gap-x-[26px] gap-y-2.5 text-[.88rem] font-semibold [&_a]:text-[#586070] [&_a:hover]:text-[#191c22]"><li><a href="#">Features</a></li><li><a href="#">Pricing</a></li><li><a href="#">Blog</a></li><li><a href="#">Careers</a></li><li><a href="#">Support</a></li></ul>
  </nav>
  <ul class="mb-6 flex justify-center gap-2.5 [&_a]:flex [&_a]:size-[38px] [&_a]:items-center [&_a]:justify-center [&_a]:rounded-full! [&_a]:border [&_a]:border-[#e3e6eb] [&_a]:text-[#586070] [&_a]:transition [&_a]:duration-150 [&_a:hover]:-translate-y-[3px] [&_a:hover]:border-[#191c22] [&_a:hover]:text-[#191c22] motion-reduce:[&_a]:transition-none motion-reduce:[&_a:hover]:translate-y-0 [&_svg]:size-4 [&_svg]:fill-none [&_svg]:stroke-current [&_svg]:stroke-2 [&_svg]:[stroke-linecap:round] [&_svg]:[stroke-linejoin:round]">
    <li><a href="#" aria-label="Fieldnote on X"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4l16 16M20 4L4 20"/></svg></a></li>
    <li><a href="#" aria-label="Fieldnote on GitHub"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 19c-4 1.3-4-2.2-6-2.7m12 5.4v-3.4c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 00-1.3-3.2 4.3 4.3 0 00-.1-3.2s-1-.3-3.4 1.3a11.7 11.7 0 00-6 0C6.7 3.6 5.7 3.9 5.7 3.9a4.3 4.3 0 00-.1 3.2A4.6 4.6 0 004.3 10.3c0 4.6 2.7 5.7 5.5 6-.4.4-.5.9-.5 1.5V21"/></svg></a></li>
    <li><a href="#" aria-label="Fieldnote on LinkedIn"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M8 11v6M8 8v.01M12 17v-3.5a2 2 0 014 0V17"/></svg></a></li>
    <li><a href="#" aria-label="Fieldnote on YouTube"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="2.5" y="5" width="19" height="14" rx="4"/><path d="M10 9.5l4.5 2.5-4.5 2.5z"/></svg></a></li>
  </ul>
  <p class="text-[.78rem] text-[#6b7280] [&_a:hover]:text-[#191c22] [&_a:hover]:underline">© Fieldnote Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
</footer>

About this set

A compact, symmetrical footer with everything on one centre line. From top to bottom it stacks a dark rounded logo mark that links home, a single row of five links, four round outlined social buttons for X, GitHub, LinkedIn and YouTube, and a line of fine print with the copyright and Privacy and Terms links. With no columns to collapse, it works the same on a phone as on a desktop: the link row simply wraps onto a second centred line, and the social buttons stay in one row down to 375px. The social icons are inline SVG in the link colour and darken with the border on hover, where the button also lifts slightly unless reduced motion is requested. It suits personal sites, small product pages, portfolios and apps that need a clean ending rather than a sitemap. The Bootstrap version uses a centred .nav for the links, round .btn social buttons and text-center, list-unstyled and flex utilities; the Tailwind version is utility classes only.

What’s included

  • Logo mark that links to the home page
  • Centred link row that wraps cleanly
  • Four round social buttons with inline SVG icons
  • Fine print with real Privacy and Terms links
  • Same layout on every screen size

Accessibility

The logo link has the visually hidden name Fieldnote home, the links sit in a nav labelled Footer, and each social link has a name such as Fieldnote on GitHub with its icon hidden. All links show a dark 2px focus outline. The fine print was darkened to #6b7280 for 4.5:1, and the hover lift is removed under prefers-reduced-motion.

Customise it

Change --fctr-text, --fctr-link, --fctr-muted and --fctr-line on .fctr in the plain CSS and Bootstrap versions; Bootstrap also reads --bs-nav-link-* and --bs-btn-* there. In Tailwind edit text-[#586070] and border-[#e3e6eb].