Open demo

CSS code

HTML 
<footer class="fmin">
  <p>© <b>Papergrain</b> · Made in Porto</p>
  <nav aria-label="Footer">
    <ul><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li><li><a href="#">RSS</a></li><li><a href="#">Contact</a></li></ul>
  </nav>
</footer>
CSS 
/* One-line footer: name and copyright on the left, a short inline nav on the right. Wraps onto two lines on narrow screens. */
.fmin{--fmin-text:#16181d;--fmin-muted:#6e7481;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 16px;padding:22px 34px;
  border-top:1px solid #ebedf0;color:var(--fmin-text);line-height:normal}
.fmin,.fmin *{box-sizing:border-box}
.fmin p,.fmin ul{margin:0;padding:0}
.fmin p{font-size:.85rem;color:var(--fmin-muted)}
.fmin p b{color:var(--fmin-text);font-weight:700}
.fmin ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px}
.fmin a{font-size:.84rem;font-weight:600;color:var(--fmin-muted);text-decoration:none;border-radius:4px}
.fmin a:hover{color:var(--fmin-text)}
.fmin a:focus-visible{outline:2px solid var(--fmin-text);outline-offset:3px}
@media (max-width:639.98px){.fmin{padding:22px 20px}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<footer class="fmin d-flex flex-wrap align-items-center justify-content-between">
  <p class="mb-0">© <b>Papergrain</b> · Made in Porto</p>
  <nav aria-label="Footer">
    <ul class="nav"><li class="nav-item"><a class="nav-link" href="#">Privacy</a></li><li class="nav-item"><a class="nav-link" href="#">Terms</a></li><li class="nav-item"><a class="nav-link" href="#">RSS</a></li><li class="nav-item"><a class="nav-link" href="#">Contact</a></li></ul>
  </nav>
</footer>
CSS 
/* Flex utilities for the row, a .nav for the links; colours through the --bs-nav-link-* variables. */
.fmin{--fmin-text:#16181d;--fmin-muted:#6e7481;padding:22px 34px;gap:12px 16px;border-top:1px solid #ebedf0;color:var(--fmin-text);line-height:normal}
.fmin p{font-size:.85rem;color:var(--fmin-muted)}
.fmin p b{color:var(--fmin-text);font-weight:700}
.fmin .nav{--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:0;--bs-nav-link-font-size:.84rem;--bs-nav-link-font-weight:600;
  --bs-nav-link-color:var(--fmin-muted);--bs-nav-link-hover-color:var(--fmin-text);gap:8px 22px}
.fmin .nav-link{border-radius:4px}
.fmin .nav-link:focus-visible{outline:2px solid var(--fmin-text);outline-offset:3px;box-shadow:none}
@media (max-width:639.98px){.fmin{padding:22px 20px}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<footer class="flex flex-wrap items-center justify-between gap-x-4 gap-y-3 border-t border-[#ebedf0] px-5 py-[22px] leading-[normal] text-[#16181d] sm:px-[34px]">
  <p class="text-[.85rem] text-[#6e7481]">© <b class="font-bold text-[#16181d]">Papergrain</b> · Made in Porto</p>
  <nav aria-label="Footer">
    <ul class="flex flex-wrap gap-x-[22px] gap-y-2 text-[.84rem] font-semibold [&_a]:rounded [&_a]:text-[#6e7481] [&_a:hover]:text-[#16181d] [&_a:focus-visible]:outline-2 [&_a:focus-visible]:outline-offset-[3px] [&_a:focus-visible]:outline-[#16181d]"><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li><li><a href="#">RSS</a></li><li><a href="#">Contact</a></li></ul>
  </nav>
</footer>

About this set

The smallest useful footer: a single row with the copyright and a note on the left and four short links on the right, separated from the page by a hairline border. The brand name is bold and dark while the rest of the line is a muted grey, so the footer reads as quiet fine print that never competes with the content above it. The links, Privacy, Terms, RSS and Contact, sit in a nav labelled Footer and brighten to near-black on hover. Both halves wrap independently: on a narrow screen the links drop below the copyright and wrap again if they run out of room, and the side padding shrinks below 640px so there is no horizontal scroll at 375px. There are no icons, no columns and no JavaScript, which makes it a good fit for blogs, documentation sites, portfolios and landing pages where a full sitemap footer would be too much. The Bootstrap version uses flex utilities for the row and a .nav for the links, restyled through the –bs-nav-link-* variables.

What’s included

  • Single row with copyright on the left and links on the right
  • Links in a nav labelled Footer
  • Wraps onto two lines on narrow screens
  • Neutral copyright line without a year that goes stale
  • No icons, columns or JavaScript

Accessibility

The links sit in a nav with aria-label Footer and each shows a dark 2px focus outline. The grey text and links use #6e7481, which reaches 4.5:1 on white, and hover only darkens the colour. Nothing animates.

Customise it

Change --fmin-text and --fmin-muted on .fmin in the plain CSS and Bootstrap versions; in Bootstrap the link colours come from --bs-nav-link-color and --bs-nav-link-hover-color. In Tailwind edit text-[#6e7481] and hover:text-[#16181d].