Open demo

CSS code

HTML 
<footer class="fd">
  <div class="fd-in">
    <nav class="fd-cols" aria-label="Categories">
      <div><h2>Eat & drink</h2><ul><li><a href="#">Restaurants</a></li><li><a href="#">Cafés</a></li><li><a href="#">Bars</a></li><li><a href="#">Bakeries</a></li></ul></div>
      <div><h2>Home</h2><ul><li><a href="#">Plumbers</a></li><li><a href="#">Electricians</a></li><li><a href="#">Cleaners</a></li><li><a href="#">Gardeners</a></li></ul></div>
      <div><h2>Health</h2><ul><li><a href="#">Dentists</a></li><li><a href="#">Opticians</a></li><li><a href="#">Physios</a></li><li><a href="#">Pharmacies</a></li></ul></div>
      <div><h2>Beauty</h2><ul><li><a href="#">Hairdressers</a></li><li><a href="#">Barbers</a></li><li><a href="#">Nail salons</a></li><li><a href="#">Spas</a></li></ul></div>
      <div><h2>Motoring</h2><ul><li><a href="#">Garages</a></li><li><a href="#">MOT centres</a></li><li><a href="#">Tyre fitters</a></li><li><a href="#">Car washes</a></li></ul></div>
      <div><h2>For business</h2><ul><li><a href="#">List your business</a></li><li><a href="#">Advertise</a></li><li><a href="#">Pricing</a></li><li><a href="#">Success stories</a></li></ul></div>
    </nav>
    <nav class="fd-places" aria-labelledby="fd-places-h">
      <h2 id="fd-places-h">Popular locations</h2>
      <ul class="fd-chips">
        <li><a href="#">London</a></li><li><a href="#">Manchester</a></li><li><a href="#">Birmingham</a></li><li><a href="#">Bristol</a></li>
        <li><a href="#">Leeds</a></li><li><a href="#">Glasgow</a></li><li><a href="#">Edinburgh</a></li><li><a href="#">Liverpool</a></li>
        <li><a href="#">Cardiff</a></li><li><a href="#">Newcastle</a></li><li><a href="#">Sheffield</a></li><li><a href="#">Brighton</a></li>
        <li><a href="#">Nottingham</a></li><li><a href="#">Bath</a></li><li><a href="#">York</a></li>
      </ul>
    </nav>
    <div class="fd-base">
      <p>© Locale Directory Ltd.</p>
      <nav aria-label="Legal"><ul><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li><li><a href="#">Cookies</a></li><li><a href="#">Sitemap</a></li></ul></nav>
    </div>
  </div>
</footer>
CSS 
/* Directory footer: six category columns, a row of location chips and a legal bar. Each group is its own
   labelled <nav>, so screen-reader users can jump between categories, locations and legal links. */
.fd{background:#fff;border-top:1px solid #e6e9ee;color:#5c6472;padding:40px 34px 22px}
.fd,.fd *{box-sizing:border-box}
:where(.fd) a{color:inherit;text-decoration:none}
:where(.fd) ul{list-style:none;margin:0;padding:0}
:where(.fd) :is(p,h2){margin:0}
.fd a:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.fd-in{max-width:1160px;margin:0 auto}
.fd-cols{display:grid;grid-template-columns:repeat(6,1fr);gap:26px}
.fd h2{color:#151b26;font-size:.73rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:11px}
.fd-cols ul{display:flex;flex-direction:column;gap:8px;font-size:.83rem}
.fd-cols a:hover,.fd-base a:hover{color:#151b26;text-decoration:underline}
.fd-places{margin-top:34px;padding-top:24px;border-top:1px solid #eef0f4}
.fd-places h2{margin-bottom:13px}
.fd-chips{display:flex;flex-wrap:wrap;gap:7px}
.fd-chips a{display:block;font-size:.79rem;font-weight:600;background:#f4f6f9;border-radius:999px;padding:6px 13px;
  transition:background-color .15s,color .15s}
.fd-chips a:hover{background:#e9edf3;color:#151b26}
.fd-base{margin-top:30px;padding-top:18px;border-top:1px solid #eef0f4;display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;font-size:.8rem;align-items:center}
.fd-base ul{display:flex;gap:16px;flex-wrap:wrap}
@media (max-width:1000px){.fd-cols{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.fd{padding:36px 20px 22px}.fd-cols{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.fd-chips a{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<footer class="fd">
  <div class="fd-in">
    <nav aria-label="Categories">
      <div class="row row-cols-2 row-cols-md-3 row-cols-lg-6 g-4">
        <div class="col"><h2>Eat & drink</h2><ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Restaurants</a></li><li class="nav-item"><a class="nav-link" href="#">Cafés</a></li><li class="nav-item"><a class="nav-link" href="#">Bars</a></li><li class="nav-item"><a class="nav-link" href="#">Bakeries</a></li></ul></div>
        <div class="col"><h2>Home</h2><ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Plumbers</a></li><li class="nav-item"><a class="nav-link" href="#">Electricians</a></li><li class="nav-item"><a class="nav-link" href="#">Cleaners</a></li><li class="nav-item"><a class="nav-link" href="#">Gardeners</a></li></ul></div>
        <div class="col"><h2>Health</h2><ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Dentists</a></li><li class="nav-item"><a class="nav-link" href="#">Opticians</a></li><li class="nav-item"><a class="nav-link" href="#">Physios</a></li><li class="nav-item"><a class="nav-link" href="#">Pharmacies</a></li></ul></div>
        <div class="col"><h2>Beauty</h2><ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Hairdressers</a></li><li class="nav-item"><a class="nav-link" href="#">Barbers</a></li><li class="nav-item"><a class="nav-link" href="#">Nail salons</a></li><li class="nav-item"><a class="nav-link" href="#">Spas</a></li></ul></div>
        <div class="col"><h2>Motoring</h2><ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Garages</a></li><li class="nav-item"><a class="nav-link" href="#">MOT centres</a></li><li class="nav-item"><a class="nav-link" href="#">Tyre fitters</a></li><li class="nav-item"><a class="nav-link" href="#">Car washes</a></li></ul></div>
        <div class="col"><h2>For business</h2><ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">List your business</a></li><li class="nav-item"><a class="nav-link" href="#">Advertise</a></li><li class="nav-item"><a class="nav-link" href="#">Pricing</a></li><li class="nav-item"><a class="nav-link" href="#">Success stories</a></li></ul></div>
      </div>
    </nav>
    <nav class="fd-chips border-top mt-4 pt-4" aria-labelledby="fd-places-h">
      <h2 id="fd-places-h" class="mb-3">Popular locations</h2>
      <ul class="list-unstyled d-flex flex-wrap gap-2 mb-0">
        <li><a class="badge rounded-pill" href="#">London</a></li><li><a class="badge rounded-pill" href="#">Manchester</a></li><li><a class="badge rounded-pill" href="#">Birmingham</a></li><li><a class="badge rounded-pill" href="#">Bristol</a></li>
        <li><a class="badge rounded-pill" href="#">Leeds</a></li><li><a class="badge rounded-pill" href="#">Glasgow</a></li><li><a class="badge rounded-pill" href="#">Edinburgh</a></li><li><a class="badge rounded-pill" href="#">Liverpool</a></li>
        <li><a class="badge rounded-pill" href="#">Cardiff</a></li><li><a class="badge rounded-pill" href="#">Newcastle</a></li><li><a class="badge rounded-pill" href="#">Sheffield</a></li><li><a class="badge rounded-pill" href="#">Brighton</a></li>
        <li><a class="badge rounded-pill" href="#">Nottingham</a></li><li><a class="badge rounded-pill" href="#">Bath</a></li><li><a class="badge rounded-pill" href="#">York</a></li>
      </ul>
    </nav>
    <div class="fd-base border-top d-flex flex-wrap justify-content-between align-items-center gap-3 mt-4 pt-3">
      <p class="mb-0">© Locale Directory Ltd.</p>
      <nav aria-label="Legal"><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="#">Cookies</a></li><li class="nav-item"><a class="nav-link" href="#">Sitemap</a></li></ul></nav>
    </div>
  </div>
</footer>
CSS 
/* Bootstrap .row-cols-* grid for the six categories, .nav.flex-column lists and .badge.rounded-pill
   location chips, restyled through --bs-* variables. */
.fd{--bs-border-color:#eef0f4;background:#fff;border-top:1px solid #e6e9ee;color:#5c6472;padding:40px 34px 22px}
.fd a{text-decoration:none}
.fd a:focus-visible{outline:2px solid #2563eb;outline-offset:2px;box-shadow:none}
.fd-in{max-width:1160px;margin:0 auto}
.fd h2{color:#151b26;font-size:.73rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:11px;line-height:normal}
.fd .nav{--bs-nav-link-color:#5c6472;--bs-nav-link-hover-color:#151b26;--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:0;
  --bs-nav-link-font-size:.83rem;gap:8px}
.fd .nav-link:hover{text-decoration:underline}
.fd-chips .badge{--bs-badge-font-size:.79rem;--bs-badge-font-weight:600;--bs-badge-padding-x:13px;--bs-badge-padding-y:6px;
  --bs-badge-color:#5c6472;background:#f4f6f9;line-height:normal;transition:background-color .15s,color .15s}
.fd-chips .badge:hover{background:#e9edf3;color:#151b26}
.fd-base{font-size:.8rem}
.fd-base .nav{--bs-nav-link-font-size:.8rem;gap:16px}
@media (max-width:575.98px){.fd{padding:36px 20px 22px}}
@media (prefers-reduced-motion:reduce){.fd-chips .badge{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<footer class="border-t border-[#e6e9ee] bg-white px-5 pt-9 pb-[22px] text-[#5c6472] min-[601px]:px-[34px] min-[601px]:pt-10">
  <div class="mx-auto max-w-[1160px]">
    <nav class="grid grid-cols-2 gap-[26px] min-[601px]:grid-cols-3 min-[1001px]:grid-cols-6 [&_a]:hover:text-[#151b26] [&_a]:hover:underline [&_a]:focus-visible:outline-2 [&_a]:focus-visible:outline-offset-2 [&_a]:focus-visible:outline-[#2563eb] [&_h2]:mb-[11px] [&_h2]:text-[.73rem] [&_h2]:font-extrabold [&_h2]:tracking-[.08em] [&_h2]:text-[#151b26] [&_h2]:uppercase [&_ul]:flex [&_ul]:flex-col [&_ul]:gap-2 [&_ul]:text-[.83rem]" aria-label="Categories">
      <div><h2>Eat & drink</h2><ul><li><a href="#">Restaurants</a></li><li><a href="#">Cafés</a></li><li><a href="#">Bars</a></li><li><a href="#">Bakeries</a></li></ul></div>
      <div><h2>Home</h2><ul><li><a href="#">Plumbers</a></li><li><a href="#">Electricians</a></li><li><a href="#">Cleaners</a></li><li><a href="#">Gardeners</a></li></ul></div>
      <div><h2>Health</h2><ul><li><a href="#">Dentists</a></li><li><a href="#">Opticians</a></li><li><a href="#">Physios</a></li><li><a href="#">Pharmacies</a></li></ul></div>
      <div><h2>Beauty</h2><ul><li><a href="#">Hairdressers</a></li><li><a href="#">Barbers</a></li><li><a href="#">Nail salons</a></li><li><a href="#">Spas</a></li></ul></div>
      <div><h2>Motoring</h2><ul><li><a href="#">Garages</a></li><li><a href="#">MOT centres</a></li><li><a href="#">Tyre fitters</a></li><li><a href="#">Car washes</a></li></ul></div>
      <div><h2>For business</h2><ul><li><a href="#">List your business</a></li><li><a href="#">Advertise</a></li><li><a href="#">Pricing</a></li><li><a href="#">Success stories</a></li></ul></div>
    </nav>
    <nav class="mt-[34px] border-t border-[#eef0f4] pt-6" aria-labelledby="fd-places-h">
      <h2 id="fd-places-h" class="mb-[13px] text-[.73rem] font-extrabold tracking-[.08em] text-[#151b26] uppercase">Popular locations</h2>
      <ul class="flex flex-wrap gap-[7px] [&_a]:block [&_a]:rounded-full [&_a]:bg-[#f4f6f9] [&_a]:px-[13px] [&_a]:py-1.5 [&_a]:text-[.79rem] [&_a]:font-semibold [&_a]:transition-colors [&_a]:duration-150 [&_a]:hover:bg-[#e9edf3] [&_a]:hover:text-[#151b26] [&_a]:focus-visible:outline-2 [&_a]:focus-visible:outline-offset-2 [&_a]:focus-visible:outline-[#2563eb] [&_a]:motion-reduce:transition-none">
        <li><a href="#">London</a></li><li><a href="#">Manchester</a></li><li><a href="#">Birmingham</a></li><li><a href="#">Bristol</a></li>
        <li><a href="#">Leeds</a></li><li><a href="#">Glasgow</a></li><li><a href="#">Edinburgh</a></li><li><a href="#">Liverpool</a></li>
        <li><a href="#">Cardiff</a></li><li><a href="#">Newcastle</a></li><li><a href="#">Sheffield</a></li><li><a href="#">Brighton</a></li>
        <li><a href="#">Nottingham</a></li><li><a href="#">Bath</a></li><li><a href="#">York</a></li>
      </ul>
    </nav>
    <div class="mt-[30px] flex flex-wrap items-center justify-between gap-3.5 border-t border-[#eef0f4] pt-[18px] text-[.8rem]">
      <p>© Locale Directory Ltd.</p>
      <nav aria-label="Legal"><ul class="flex flex-wrap gap-4 [&_a]:hover:text-[#151b26] [&_a]:hover:underline [&_a]:focus-visible:outline-2 [&_a]:focus-visible:outline-offset-2 [&_a]:focus-visible:outline-[#2563eb]"><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li><li><a href="#">Cookies</a></li><li><a href="#">Sitemap</a></li></ul></nav>
    </div>
  </div>
</footer>

About this set

A wide, link-heavy footer for a local business directory, marketplace or listings site. Six category columns (Eat and drink, Home, Health, Beauty, Motoring, For business) each list four popular subcategories, and a Popular locations row below them shows fifteen towns and cities as rounded chips. A legal bar with Privacy, Terms, Cookies and Sitemap closes it. Use it where the footer doubles as a site map and helps both visitors and search engines reach deep category and location pages. The six columns become three on tablets and two on phones, and the chips wrap onto as many lines as they need. Each group is its own navigation landmark: categories in a nav labelled Categories, locations in a nav labelled by its Popular locations heading, and the legal links in a nav labelled Legal, so a screen-reader user can jump straight to the part they want. Links underline on hover, and the chips darken with a short colour transition that is removed under reduced motion. The Bootstrap version uses .row-cols-*, .nav.flex-column and .badge.rounded-pill chips.

What’s included

  • Six category columns that reflow to three and then two
  • Location chips that wrap onto as many lines as needed
  • Separate navigation landmarks for categories, locations and legal links
  • Chip colour transition removed under prefers-reduced-motion
  • Bootstrap version uses .row-cols-*, .nav.flex-column and .badge.rounded-pill

Accessibility

Categories, locations and legal links are three navs with distinct names, the locations one labelled by its visible heading through aria-labelledby. Every link and chip shows a 2px blue outline on keyboard focus, and the grey link and chip text reaches 5.5:1 on white and on the chip fill.

Customise it

Change #5c6472 (link text), #f4f6f9 and #e9edf3 (chip fill and hover) and #2563eb (focus) in the .fd rules. In Bootstrap the link colours are --bs-nav-link-* on .fd .nav and the chips use --bs-badge-*; in Tailwind edit the [&_a] utilities on each list.