Footer
It should go directly under the page feedback component (if applicable).
It must provide the following links and in the order as per the below demo.
The HTML code snippet below requires the Bristol City Council logo file, which you can download from this link.
Make sure to save the logo file in the root directory of your project before using the HTML snippet, as the image path in the source attribute of the image element assumes its presence there.
<footer class="footer light-footer bg-grey-dark has-p-4">
<div class="container">
<div class="footer-container">
<a
class="brand"
href="/"
title="Go to the https://bristol.gov.uk homepage"
>
<div
role="img"
class="brand-img"
aria-label="Bristol City Council"
>
<img
src="/BCC_logo_color_negative.svg"
width="80px"
alt="Bristol City Council - colour logo"
title="Bristol City Council - colour logo"
/>
</div>
</a>
<nav class="footer-nav">
<ul class="nav-items list-unstyled">
<li>
<a
class="nav-link"
href="https://bristol.gov.uk/contact"
>Contact</a
>
</li>
<li>
<a
class="nav-link"
href="https://bristol.gov.uk/complaints"
>Complaints and feedback</a
>
</li>
<li>
<a
class="nav-link"
href="https://bristol.gov.uk/cookies"
>Cookies</a
>
</li>
<li>
<a
class="nav-link"
href="https://bristol.gov.uk/privacy"
>Privacy</a
>
</li>
<li>
<a
class="nav-link"
href="https://bristol.gov.uk/accessibility"
>Accessibility</a
>
</li>
<li>
<a
class="nav-link"
href="https://bristol.gov.uk/copyright"
>Copyright</a
>
</li>
</ul>
</nav>
<div class="brand-container"></div>
</div>
</div>
</footer>
Main website only
(for use on main website only)
This footer is used to show people they are on the main Bristol City Council website. Only use the main footer when building a page that sits on the main Bristol City Council website. Do not use for third party websites. There is an option to add a larger logo with more content.
- HTML5
- JavaScript
<footer class="footer site-footer bg-black has-p-4">
<div class="container">
<div class="footer-container">
<div class="brand-container has-extra-brand">
<a
class="brand"
href="https://bristol.gov.uk"
aria-label="Bristol City Council home page - bristol.gov.uk Information for residents about Bristol City Council services including council tax, bins and recycling, schools, leisure, streets and parking."
>
<div
role="img"
class="brand-img"
aria-label="Bristol City Council"
>
<!-- BCC Logo -->
<img
src="/BCC_logo_color_negative.svg"
width="80px"
alt="Bristol City Council - colour logo"
title="Bristol City Council - colour logo"
/>
</div>
</a>
<div class="extra-brand">
<a href="_#" role="img" aria-label="Extra logo desc here">
<!-- logo Ipsum -> logo 5 -->
<svg
area-hidden="true"
viewBox="92.79 212.951 285.047 72.764"
xmlns="http://www.w3.org/2000/svg"
>
<title>logo-5</title>
<g
transform="matrix(2.086253, 0, 0, 2.086253, -982.509338, -202.758148)"
>
<path
d="M 549.212 208.872 L 552.212 208.872 L 552.212 223.322 L 549.212 223.322 Z"
fill="#ffffff"
></path>
<path
d="M 553.892 218.372 C 553.892 214.331 558.267 211.805 561.767 213.826 C 565.267 215.846 565.267 220.898 561.767 222.919 C 560.96 223.385 560.044 223.627 559.112 223.622 C 556.208 223.645 553.853 221.276 553.892 218.372 Z M 561.412 218.372 C 561.366 216.618 559.438 215.571 557.941 216.488 C 556.445 217.406 556.503 219.599 558.045 220.436 C 558.379 220.617 558.752 220.712 559.132 220.712 C 560.422 220.737 561.462 219.661 561.392 218.372 Z"
fill="#ffffff"
></path>
<path
d="M 576.202 213.422 L 576.202 222.832 C 576.202 226.152 573.602 227.562 570.972 227.562 C 569.08 227.717 567.263 226.788 566.282 225.162 L 568.812 223.702 C 569.232 224.549 570.132 225.046 571.072 224.952 C 572.319 225.106 573.397 224.085 573.312 222.832 L 573.312 221.922 C 572.604 222.78 571.533 223.255 570.422 223.202 C 566.573 223.202 564.167 219.035 566.092 215.702 C 566.985 214.155 568.636 213.202 570.422 213.202 C 571.533 213.15 572.604 213.624 573.312 214.482 L 573.312 213.482 Z M 573.312 218.172 C 573.389 216.326 571.439 215.089 569.802 215.945 C 568.165 216.802 568.068 219.109 569.628 220.099 C 570.012 220.342 570.457 220.472 570.912 220.472 C 572.235 220.567 573.351 219.498 573.312 218.172 Z"
fill="#ffffff"
></path>
<path
d="M 577.892 218.372 C 577.892 214.331 582.267 211.805 585.767 213.826 C 589.267 215.846 589.267 220.898 585.767 222.919 C 584.966 223.381 584.057 223.624 583.132 223.622 C 580.222 223.65 577.858 221.282 577.892 218.372 Z M 585.412 218.372 C 585.366 216.618 583.438 215.571 581.941 216.488 C 580.445 217.406 580.503 219.599 582.045 220.436 C 582.382 220.619 582.759 220.714 583.142 220.712 C 584.432 220.737 585.472 219.661 585.402 218.372 Z"
fill="#ffffff"
></path>
<path
d="M 589.762 210.772 C 589.762 209.402 591.245 208.545 592.432 209.231 C 593.619 209.916 593.619 211.629 592.432 212.314 C 592.161 212.47 591.854 212.552 591.542 212.552 C 590.563 212.541 589.773 211.751 589.762 210.772 Z M 590.052 213.422 L 593.052 213.422 L 593.052 223.322 L 590.052 223.322 Z"
fill="#ffffff"
></path>
<path
d="M 605.892 218.372 C 606.033 221.142 603.893 223.498 601.122 223.622 C 599.99 223.697 598.885 223.252 598.122 222.412 L 598.122 227.302 L 595.122 227.302 L 595.122 213.422 L 598.122 213.422 L 598.122 214.352 C 598.886 213.515 599.991 213.073 601.122 213.152 C 603.881 213.276 606.016 215.613 605.892 218.372 Z M 602.892 218.372 C 602.846 216.556 600.851 215.471 599.301 216.419 C 597.751 217.367 597.809 219.637 599.405 220.505 C 599.754 220.695 600.145 220.794 600.542 220.792 C 601.891 220.849 602.989 219.719 602.892 218.372 Z"
fill="#ffffff"
></path>
<path
d="M 615.022 220.352 C 615.022 222.632 613.022 223.602 610.902 223.602 C 609.133 223.761 607.445 222.826 606.642 221.242 L 609.222 219.782 C 609.433 220.518 610.129 221.005 610.892 220.952 C 611.602 220.952 611.962 220.732 611.962 220.332 C 611.962 219.242 607.092 219.822 607.092 216.392 C 607.092 214.232 608.912 213.152 610.972 213.152 C 612.567 213.081 614.073 213.891 614.892 215.262 L 612.312 216.622 C 612.079 216.095 611.558 215.754 610.982 215.752 C 610.462 215.752 610.152 215.952 610.152 216.302 C 610.152 217.442 615.022 216.692 615.022 220.352 Z"
fill="#ffffff"
></path>
<path
d="M 625.892 213.422 L 625.892 223.322 L 622.892 223.322 L 622.892 222.392 C 622.201 223.227 621.154 223.684 620.072 223.622 C 618.072 223.622 616.362 222.192 616.362 219.522 L 616.362 213.422 L 619.362 213.422 L 619.362 219.072 C 619.262 220.077 620.084 220.933 621.092 220.872 C 622.172 220.872 622.932 220.232 622.932 218.872 L 622.932 213.422 Z"
fill="#ffffff"
></path>
<path
d="M 642.892 217.242 L 642.892 223.322 L 639.892 223.322 L 639.892 217.502 C 639.892 216.502 639.422 215.882 638.472 215.882 C 637.522 215.882 636.922 216.572 636.922 217.742 L 636.922 223.322 L 633.922 223.322 L 633.922 217.502 C 633.922 216.502 633.452 215.882 632.502 215.882 C 631.552 215.882 630.952 216.572 630.952 217.742 L 630.952 223.322 L 627.952 223.322 L 627.952 213.422 L 630.952 213.422 L 630.952 214.332 C 631.583 213.515 632.583 213.072 633.612 213.152 C 634.644 213.098 635.628 213.592 636.202 214.452 C 636.872 213.555 637.955 213.064 639.072 213.152 C 641.412 213.152 642.892 214.772 642.892 217.242 Z"
fill="#ffffff"
></path>
<path
d="M 531.342 206.272 L 531.342 202.022 L 517.942 202.022 L 517.942 231.222 L 531.342 231.222 L 531.342 226.972 C 523.375 226.972 518.395 218.347 522.379 211.447 C 524.227 208.245 527.644 206.272 531.342 206.272 Z"
fill="#ffffff"
></path>
<path
d="M 531.342 206.272 L 531.342 226.972 C 539.309 226.972 544.289 218.347 540.305 211.447 C 538.456 208.245 535.04 206.272 531.342 206.272 Z"
fill="#ffffff"
></path>
<circle
cx="645.412"
cy="211.162"
r="2.2"
fill="#ffffff"
></circle>
</g>
</svg>
</a>
<a href="_#" role="img" aria-label="Extra logo desc here">
<!-- logo Ipsum -> logo 5 -->
<svg
area-hidden="true"
viewBox="92.79 212.951 285.047 72.764"
xmlns="http://www.w3.org/2000/svg"
>
<title>logo-5</title>
<g
transform="matrix(2.086253, 0, 0, 2.086253, -982.509338, -202.758148)"
>
<path
d="M 549.212 208.872 L 552.212 208.872 L 552.212 223.322 L 549.212 223.322 Z"
fill="#ffffff"
></path>
<path
d="M 553.892 218.372 C 553.892 214.331 558.267 211.805 561.767 213.826 C 565.267 215.846 565.267 220.898 561.767 222.919 C 560.96 223.385 560.044 223.627 559.112 223.622 C 556.208 223.645 553.853 221.276 553.892 218.372 Z M 561.412 218.372 C 561.366 216.618 559.438 215.571 557.941 216.488 C 556.445 217.406 556.503 219.599 558.045 220.436 C 558.379 220.617 558.752 220.712 559.132 220.712 C 560.422 220.737 561.462 219.661 561.392 218.372 Z"
fill="#ffffff"
></path>
<path
d="M 576.202 213.422 L 576.202 222.832 C 576.202 226.152 573.602 227.562 570.972 227.562 C 569.08 227.717 567.263 226.788 566.282 225.162 L 568.812 223.702 C 569.232 224.549 570.132 225.046 571.072 224.952 C 572.319 225.106 573.397 224.085 573.312 222.832 L 573.312 221.922 C 572.604 222.78 571.533 223.255 570.422 223.202 C 566.573 223.202 564.167 219.035 566.092 215.702 C 566.985 214.155 568.636 213.202 570.422 213.202 C 571.533 213.15 572.604 213.624 573.312 214.482 L 573.312 213.482 Z M 573.312 218.172 C 573.389 216.326 571.439 215.089 569.802 215.945 C 568.165 216.802 568.068 219.109 569.628 220.099 C 570.012 220.342 570.457 220.472 570.912 220.472 C 572.235 220.567 573.351 219.498 573.312 218.172 Z"
fill="#ffffff"
></path>
<path
d="M 577.892 218.372 C 577.892 214.331 582.267 211.805 585.767 213.826 C 589.267 215.846 589.267 220.898 585.767 222.919 C 584.966 223.381 584.057 223.624 583.132 223.622 C 580.222 223.65 577.858 221.282 577.892 218.372 Z M 585.412 218.372 C 585.366 216.618 583.438 215.571 581.941 216.488 C 580.445 217.406 580.503 219.599 582.045 220.436 C 582.382 220.619 582.759 220.714 583.142 220.712 C 584.432 220.737 585.472 219.661 585.402 218.372 Z"
fill="#ffffff"
></path>
<path
d="M 589.762 210.772 C 589.762 209.402 591.245 208.545 592.432 209.231 C 593.619 209.916 593.619 211.629 592.432 212.314 C 592.161 212.47 591.854 212.552 591.542 212.552 C 590.563 212.541 589.773 211.751 589.762 210.772 Z M 590.052 213.422 L 593.052 213.422 L 593.052 223.322 L 590.052 223.322 Z"
fill="#ffffff"
></path>
<path
d="M 605.892 218.372 C 606.033 221.142 603.893 223.498 601.122 223.622 C 599.99 223.697 598.885 223.252 598.122 222.412 L 598.122 227.302 L 595.122 227.302 L 595.122 213.422 L 598.122 213.422 L 598.122 214.352 C 598.886 213.515 599.991 213.073 601.122 213.152 C 603.881 213.276 606.016 215.613 605.892 218.372 Z M 602.892 218.372 C 602.846 216.556 600.851 215.471 599.301 216.419 C 597.751 217.367 597.809 219.637 599.405 220.505 C 599.754 220.695 600.145 220.794 600.542 220.792 C 601.891 220.849 602.989 219.719 602.892 218.372 Z"
fill="#ffffff"
></path>
<path
d="M 615.022 220.352 C 615.022 222.632 613.022 223.602 610.902 223.602 C 609.133 223.761 607.445 222.826 606.642 221.242 L 609.222 219.782 C 609.433 220.518 610.129 221.005 610.892 220.952 C 611.602 220.952 611.962 220.732 611.962 220.332 C 611.962 219.242 607.092 219.822 607.092 216.392 C 607.092 214.232 608.912 213.152 610.972 213.152 C 612.567 213.081 614.073 213.891 614.892 215.262 L 612.312 216.622 C 612.079 216.095 611.558 215.754 610.982 215.752 C 610.462 215.752 610.152 215.952 610.152 216.302 C 610.152 217.442 615.022 216.692 615.022 220.352 Z"
fill="#ffffff"
></path>
<path
d="M 625.892 213.422 L 625.892 223.322 L 622.892 223.322 L 622.892 222.392 C 622.201 223.227 621.154 223.684 620.072 223.622 C 618.072 223.622 616.362 222.192 616.362 219.522 L 616.362 213.422 L 619.362 213.422 L 619.362 219.072 C 619.262 220.077 620.084 220.933 621.092 220.872 C 622.172 220.872 622.932 220.232 622.932 218.872 L 622.932 213.422 Z"
fill="#ffffff"
></path>
<path
d="M 642.892 217.242 L 642.892 223.322 L 639.892 223.322 L 639.892 217.502 C 639.892 216.502 639.422 215.882 638.472 215.882 C 637.522 215.882 636.922 216.572 636.922 217.742 L 636.922 223.322 L 633.922 223.322 L 633.922 217.502 C 633.922 216.502 633.452 215.882 632.502 215.882 C 631.552 215.882 630.952 216.572 630.952 217.742 L 630.952 223.322 L 627.952 223.322 L 627.952 213.422 L 630.952 213.422 L 630.952 214.332 C 631.583 213.515 632.583 213.072 633.612 213.152 C 634.644 213.098 635.628 213.592 636.202 214.452 C 636.872 213.555 637.955 213.064 639.072 213.152 C 641.412 213.152 642.892 214.772 642.892 217.242 Z"
fill="#ffffff"
></path>
<path
d="M 531.342 206.272 L 531.342 202.022 L 517.942 202.022 L 517.942 231.222 L 531.342 231.222 L 531.342 226.972 C 523.375 226.972 518.395 218.347 522.379 211.447 C 524.227 208.245 527.644 206.272 531.342 206.272 Z"
fill="#ffffff"
></path>
<path
d="M 531.342 206.272 L 531.342 226.972 C 539.309 226.972 544.289 218.347 540.305 211.447 C 538.456 208.245 535.04 206.272 531.342 206.272 Z"
fill="#ffffff"
></path>
<circle
cx="645.412"
cy="211.162"
r="2.2"
fill="#ffffff"
></circle>
</g>
</svg>
</a>
</div>
</div>
<nav class="footer-nav">
<ul class="nav-items list-unstyled">
<li>
<a
class="nav-link"
href="https://bristol.gov.uk/contact"
>Contact</a
>
</li>
<li>
<a
class="nav-link"
href="https://bristol.gov.uk/complaints"
>Complaints and feedback</a
>
</li>
<li>
<a
class="nav-link"
href="https://bristol.gov.uk/cookies"
>Cookies</a
>
</li>
<li>
<a
class="nav-link"
href="https://bristol.gov.uk/privacy"
>Privacy</a
>
</li>
<li>
<a
class="nav-link"
href="https://bristol.gov.uk/accessibility"
>Accessibility</a
>
</li>
<li class="copyright">
<a
class="nav-link"
href="https://bristol.gov.uk/copyright"
>Copyright</a
>
</li>
</ul>
</nav>
<div class="social-container">
<div class="social-wrapper">
<h4>Follow us:</h4>
<ul class="social-items list-unstyled">
<li>
<a
target="_blank"
href="http://www.facebook.com/BristolCouncil"
aria-label="Follow us on Facebook"
data-social-name="Facebook"
>Facebook</a
>
</li>
<li>
<a
target="_blank"
href="http://www.twitter.com/bristolcouncil"
aria-label="Follow us on X"
data-social-name="x"
>X</a
>
</li>
<li>
<a
target="_blank"
href="http://www.youtube.com/bristolcitycouncil"
aria-label="Follow us on Youtube"
data-social-name="Youtube"
>Youtube</a
>
</li>
<li>
<a
target="_blank"
href="https://nextdoor.co.uk/agency-detail/england/bristol/bristol-city-council/"
aria-label="Connect with us on Nextdoor."
data-social-name="Nextdoor"
>Nextdoor</a
>
</li>
<li>
<a
target="_blank"
href="https://www.instagram.com/bristolcouncil"
aria-label="Follow us on Instagram"
data-social-name="Instagram"
>Instagram</a
>
</li>
</ul>
</div>
</div>
<div class="copyright-container">
<p>Copyright © <span id="year"></span> Bristol City Council</p>
</div>
</div>
</div>
</footer>
<script>
window.onload = function () {
document.getElementById("year").textContent =
new Date().getFullYear();
};
</script>