Contact Footer with Hours in CSS, Bootstrap & Tailwind

Open demo

CSS code

HTML

<footer class="fcon">
  <div class="grid">
    <section aria-labelledby="fcon-visit">
      <h2 id="fcon-visit">Visit us</h2>
      <address>Copperleaf Kitchen<br>48 Bridge Street<br>Bath BA2 4AS<br>United Kingdom</address>
    </section>
    <section aria-labelledby="fcon-touch">
      <h2 id="fcon-touch">Get in touch</h2>
      <ul class="rows">
        <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 4h4l2 5-2.5 1.5a12 12 0 005 5L15 13l5 2v4a1 1 0 01-1 1A16 16 0 014 5a1 1 0 011-1z"/></svg><a href="tel:+441225000000">+44 1225 000 000</a></li>
        <li><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg><a href="mailto:[email protected]">[email protected]</a></li>
        <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s7-5.3 7-11a7 7 0 10-14 0c0 5.7 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></svg><a href="#">Get directions</a></li>
      </ul>
    </section>
    <section aria-labelledby="fcon-hours">
      <h2 id="fcon-hours">Opening hours</h2>
      <dl class="hours">
        <div><dt>Mon – Thu</dt><dd>12:00 – 22:00</dd></div>
        <div><dt>Fri – Sat</dt><dd>12:00 – 23:30</dd></div>
        <div><dt>Sunday</dt><dd>12:00 – 17:00</dd></div>
        <div><dt>Bank holidays</dt><dd class="shut">Closed</dd></div>
      </dl>
    </section>
    <!-- Decorative map pattern: swap it for a map embed or a static map image with alt text if you want a real map. -->
    <div class="map" aria-hidden="true"></div>
  </div>
  <div class="base">
    <p>© Copperleaf Kitchen</p>
    <nav aria-label="Legal"><ul><li><a href="#">Privacy</a></li><li><a href="#">Allergens</a></li><li><a href="#">Careers</a></li></ul></nav>
  </div>
</footer>

CSS

/* Contact-led footer: address, tel:/mailto: links, opening hours as a description list and a decorative CSS map band. */
.fcon{--fcon-text:#241f19;--fcon-body:#5b544a;--fcon-muted:#776b5b;--fcon-line:#e9e5df;--fcon-accent:#c2410c;
  background:#fbfaf8;border-top:1px solid var(--fcon-line);padding:44px 34px 26px;color:var(--fcon-body);line-height:normal}
.fcon,.fcon *{box-sizing:border-box}
.fcon h2,.fcon p,.fcon ul,.fcon dl,.fcon dd{margin:0;padding:0}
.fcon ul{list-style:none}
.fcon a{color:inherit;text-decoration:none;border-radius:4px}
.fcon a:focus-visible{outline:2px solid var(--fcon-accent);outline-offset:2px}
.fcon .grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:38px;max-width:1060px;margin:0 auto}
.fcon h2{margin-bottom:14px;color:var(--fcon-text);font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.fcon address{font-style:normal;font-size:.88rem;line-height:1.8}
.fcon .rows{display:flex;flex-direction:column;gap:11px;font-size:.88rem}
.fcon .rows li{display:flex;align-items:flex-start;gap:10px}
.fcon .rows svg{display:block;width:16px;height:16px;flex-shrink:0;margin-top:2px;fill:none;stroke:#a89a86;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fcon .rows a:hover{color:var(--fcon-text);text-decoration:underline}
.fcon .hours{display:flex;flex-direction:column;gap:7px;font-size:.86rem}
.fcon .hours div{display:flex;justify-content:space-between;gap:16px;padding-bottom:6px;border-bottom:1px solid #efebe4}
.fcon .hours div:last-child{border-bottom:0}
.fcon .hours dt{color:var(--fcon-text);font-weight:600}
.fcon .hours .shut{color:var(--fcon-muted)}
.fcon .map{grid-column:1 / -1;position:relative;height:150px;margin-top:6px;overflow:hidden;border-radius:14px;background:
   linear-gradient(90deg,#e6e1d8 1px,transparent 1px) 0 0/44px 44px,
   linear-gradient(180deg,#e6e1d8 1px,transparent 1px) 0 0/44px 44px,
   linear-gradient(140deg,#f2efe9,#e9e4da)}
.fcon .map::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-22px 0 0 -9px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--fcon-accent);box-shadow:0 6px 14px -4px rgba(120,50,10,.5)}
.fcon .base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;max-width:1060px;margin:34px auto 0;padding-top:20px;border-top:1px solid var(--fcon-line);font-size:.82rem}
.fcon .base ul{display:flex;flex-wrap:wrap;gap:8px 18px}
.fcon .base a:hover{color:var(--fcon-text)}
@media (max-width:767.98px){.fcon{padding:40px 20px 26px}.fcon .grid{grid-template-columns:1fr;gap:28px}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML

<footer class="fcon">
  <div class="grid">
    <div class="row">
      <section class="col-12 col-md-4" aria-labelledby="fcon-visit">
        <h2 id="fcon-visit">Visit us</h2>
        <address>Copperleaf Kitchen<br>48 Bridge Street<br>Bath BA2 4AS<br>United Kingdom</address>
      </section>
      <section class="col-12 col-md-4" aria-labelledby="fcon-touch">
        <h2 id="fcon-touch">Get in touch</h2>
        <ul class="rows list-unstyled d-flex flex-column mb-0">
          <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 4h4l2 5-2.5 1.5a12 12 0 005 5L15 13l5 2v4a1 1 0 01-1 1A16 16 0 014 5a1 1 0 011-1z"/></svg><a href="tel:+441225000000">+44 1225 000 000</a></li>
          <li><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg><a href="mailto:[email protected]">[email protected]</a></li>
          <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s7-5.3 7-11a7 7 0 10-14 0c0 5.7 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></svg><a href="#">Get directions</a></li>
        </ul>
      </section>
      <section class="col-12 col-md-4" aria-labelledby="fcon-hours">
        <h2 id="fcon-hours">Opening hours</h2>
        <dl class="hours d-flex flex-column mb-0">
          <div><dt>Mon – Thu</dt><dd>12:00 – 22:00</dd></div>
          <div><dt>Fri – Sat</dt><dd>12:00 – 23:30</dd></div>
          <div><dt>Sunday</dt><dd>12:00 – 17:00</dd></div>
          <div><dt>Bank holidays</dt><dd class="shut">Closed</dd></div>
        </dl>
      </section>
      <div class="map-col col-12">
        <!-- Decorative map pattern: swap it for a map embed or a static map image with alt text if you want a real map. -->
        <div class="map" aria-hidden="true"></div>
      </div>
    </div>
  </div>
  <div class="base d-flex flex-wrap justify-content-between">
    <p class="mb-0">© Copperleaf Kitchen</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="#">Allergens</a></li><li class="nav-item"><a class="nav-link" href="#">Careers</a></li></ul></nav>
  </div>
</footer>

CSS

/* Bootstrap .row / .col-md-4 columns, .list-unstyled contact rows and a .nav legal row. */
.fcon{--fcon-text:#241f19;--fcon-body:#5b544a;--fcon-muted:#776b5b;--fcon-line:#e9e5df;--fcon-accent:#c2410c;
  background:#fbfaf8;border-top:1px solid var(--fcon-line);padding:44px 34px 26px;color:var(--fcon-body);line-height:normal}
.fcon .grid{max-width:1060px;margin:0 auto}
.fcon .grid>.row{--bs-gutter-x:38px;--bs-gutter-y:38px}
.fcon h2{margin-bottom:14px;color:var(--fcon-text);font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;line-height:normal}
.fcon address{font-size:.88rem;line-height:1.8;margin:0}
.fcon .rows{gap:11px;font-size:.88rem}
.fcon .rows li{display:flex;align-items:flex-start;gap:10px}
.fcon .rows svg{display:block;width:16px;height:16px;flex-shrink:0;margin-top:2px;fill:none;stroke:#a89a86;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fcon .rows a{color:inherit;text-decoration:none}
.fcon .rows a:hover{color:var(--fcon-text);text-decoration:underline}
.fcon .hours{gap:7px;font-size:.86rem}
.fcon .hours div{display:flex;justify-content:space-between;gap:16px;padding-bottom:6px;border-bottom:1px solid #efebe4}
.fcon .hours div:last-child{border-bottom:0}
.fcon .hours dt{color:var(--fcon-text);font-weight:600}
.fcon .hours dd{margin:0}
.fcon .hours .shut{color:var(--fcon-muted)}
.fcon .map{position:relative;height:150px;margin-top:6px;overflow:hidden;border-radius:14px;background:
   linear-gradient(90deg,#e6e1d8 1px,transparent 1px) 0 0/44px 44px,
   linear-gradient(180deg,#e6e1d8 1px,transparent 1px) 0 0/44px 44px,
   linear-gradient(140deg,#f2efe9,#e9e4da)}
.fcon .map::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-22px 0 0 -9px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--fcon-accent);box-shadow:0 6px 14px -4px rgba(120,50,10,.5)}
.fcon .base{gap:16px;max-width:1060px;margin:34px auto 0;padding-top:20px;border-top:1px solid var(--fcon-line);font-size:.82rem}
.fcon .nav{--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:0;--bs-nav-link-font-size:.82rem;--bs-nav-link-color:var(--fcon-body);--bs-nav-link-hover-color:var(--fcon-text);gap:8px 18px}
.fcon a{border-radius:4px}
.fcon a:focus-visible{outline:2px solid var(--fcon-accent);outline-offset:2px;box-shadow:none}
@media (max-width:767.98px){.fcon{padding:40px 20px 26px}.fcon .grid>.row{--bs-gutter-y:28px}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML

<footer class="border-t border-[#e9e5df] bg-[#fbfaf8] px-5 pt-10 pb-[26px] leading-[normal] text-[#5b544a] md:px-[34px] md:pt-11 [&_a]:rounded [&_a:focus-visible]:outline-2 [&_a:focus-visible]:outline-offset-2 [&_a:focus-visible]:outline-[#c2410c]">
  <div class="mx-auto grid max-w-[1060px] grid-cols-1 gap-7 md:grid-cols-[1.1fr_1fr_1fr] md:gap-[38px] [&_h2]:mb-3.5 [&_h2]:text-[.78rem] [&_h2]:font-extrabold [&_h2]:tracking-[.08em] [&_h2]:text-[#241f19] [&_h2]:uppercase">
    <section aria-labelledby="fcon-visit">
      <h2 id="fcon-visit">Visit us</h2>
      <address class="text-[.88rem] leading-[1.8] not-italic">Copperleaf Kitchen<br>48 Bridge Street<br>Bath BA2 4AS<br>United Kingdom</address>
    </section>
    <section aria-labelledby="fcon-touch">
      <h2 id="fcon-touch">Get in touch</h2>
      <ul class="flex flex-col gap-[11px] text-[.88rem] [&_a:hover]:text-[#241f19] [&_a:hover]:underline [&_li]:flex [&_li]:items-start [&_li]:gap-2.5 [&_svg]:mt-0.5 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:fill-none [&_svg]:stroke-[#a89a86] [&_svg]:stroke-2 [&_svg]:[stroke-linecap:round] [&_svg]:[stroke-linejoin:round]">
        <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 4h4l2 5-2.5 1.5a12 12 0 005 5L15 13l5 2v4a1 1 0 01-1 1A16 16 0 014 5a1 1 0 011-1z"/></svg><a href="tel:+441225000000">+44 1225 000 000</a></li>
        <li><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg><a href="mailto:[email protected]">[email protected]</a></li>
        <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s7-5.3 7-11a7 7 0 10-14 0c0 5.7 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></svg><a href="#">Get directions</a></li>
      </ul>
    </section>
    <section aria-labelledby="fcon-hours">
      <h2 id="fcon-hours">Opening hours</h2>
      <dl class="flex flex-col gap-[7px] text-[.86rem] [&_div]:flex [&_div]:justify-between [&_div]:gap-4 [&_div]:border-b [&_div]:border-[#efebe4] [&_div]:pb-1.5 [&_div:last-child]:border-b-0 [&_dt]:font-semibold [&_dt]:text-[#241f19]">
        <div><dt>Mon – Thu</dt><dd>12:00 – 22:00</dd></div>
        <div><dt>Fri – Sat</dt><dd>12:00 – 23:30</dd></div>
        <div><dt>Sunday</dt><dd>12:00 – 17:00</dd></div>
        <div><dt>Bank holidays</dt><dd class="text-[#776b5b]">Closed</dd></div>
      </dl>
    </section>
    <!-- Decorative map pattern: swap it for a map embed or a static map image with alt text if you want a real map. -->
    <div class="relative col-span-full h-[150px] overflow-hidden rounded-[14px] bg-[linear-gradient(90deg,#e6e1d8_1px,transparent_1px),linear-gradient(180deg,#e6e1d8_1px,transparent_1px),linear-gradient(140deg,#f2efe9,#e9e4da)] bg-size-[44px_44px,44px_44px,auto] after:absolute after:top-1/2 after:left-1/2 after:-mt-[22px] after:-ml-[9px] after:size-[18px] after:-rotate-45 after:rounded-[50%_50%_50%_0] after:bg-[#c2410c] after:shadow-[0_6px_14px_-4px_rgba(120,50,10,.5)] after:content-[''] mt-1.5" aria-hidden="true"></div>
  </div>
  <div class="mx-auto mt-[34px] flex max-w-[1060px] flex-wrap justify-between gap-4 border-t border-[#e9e5df] pt-5 text-[.82rem]">
    <p>© Copperleaf Kitchen</p>
    <nav aria-label="Legal"><ul class="flex flex-wrap gap-x-[18px] gap-y-2 [&_a:hover]:text-[#241f19]"><li><a href="#">Privacy</a></li><li><a href="#">Allergens</a></li><li><a href="#">Careers</a></li></ul></nav>
  </div>
</footer>

About this set

A contact-led footer for restaurants, shops, studios and any place people visit in person. Three columns cover the essentials: the postal address in an address element, a Get in touch list with a tel: link, a mailto: link and a directions link, each with a small outline icon, and an opening hours table built as a description list so every day is paired with its times. A full-width map band sits under the columns; it is a decorative CSS grid with a pin, marked in the code as the place to drop a map embed or static map image. A base row finishes with the copyright and links to privacy, allergens and careers. Below 768px the columns stack in reading order and the map stays full width. There is no JavaScript and no external map service, so the footer loads instantly and sends no data to third parties until you choose to add one. The Bootstrap version uses .row and .col-md-4 columns, .list-unstyled for the contact rows and a .nav for the legal links.

What’s included

Address, tel: and mailto: links with outline icons
Opening hours as a description list
Decorative CSS map band with a pin
Stacks in reading order below 768px
No JavaScript or third-party map

Accessibility

Each column is a section labelled by its h2 heading and the hours are a dl, so each day is announced with its times. Icons and the decorative map are hidden from screen readers. Links show a 2px burnt-orange focus outline, and the grey Closed label was darkened to #776b5b to reach 4.5:1.

Customise it

Change --fcon-accent, --fcon-text, --fcon-body and --fcon-muted on .fcon in the plain CSS and Bootstrap versions. In Tailwind edit the #c2410c pin and focus colour and the #5b544a text colour in the utility classes.

CSS code

Bootstrap 5 code

Tailwind 4 code

About this set

What’s included

Accessibility

Customise it

More from Footers