Footer
Liander Bootstrap custom component. Footer component
On this page
Example
See the Footer example page for a full page example.
Basic usage
Many parts of the Footer can be customized by using the grid system.
<footer class="footer bg-secondary-80">
<div class="container position-relative">
<!-- desktop menu -->
<div class="footer-nav-links d-none d-md-block">
<div class="row">
<div class="col-12 col-md-6">
<ul class="footer-menu">
<li class="footer-menu-caption-item">
<a class="h3" href="https://www.liander.nl/consument"
>Consument</a
>
</li>
<li class="footer-menu-item">
<a href="https://www.liander.nl/consument/aansluitingen"
>Uw aansluiting
</a>
</li>
<li class="footer-menu-item">
<a href="https://www.liander.nl/consument/slimme_meter"
>Slimme meter
</a>
</li>
<li class="footer-menu-item">
<a
href="https://www.liander.nl/consument/energie-opwekken-en-terugleveren"
>Energie opwekken
</a>
</li>
<li class="footer-menu-item">
<a
href="https://www.liander.nl/consument/aansluitingen/afsluiting"
>Voorkom afsluiting
</a>
</li>
</ul>
</div>
<div class="col-12 col-md-6">
<ul class="footer-menu">
<li class="footer-menu-caption-item">
<a class="h3" href="https://www.liander.nl/storingen"
>Storingen</a
>
</li>
<li class="footer-menu-item">
<a href="https://www.liander.nl/storing-melden"
>Storing melden
</a>
</li>
<li class="footer-menu-item">
<a href="https://www.liander.nl/gasstoring-gaslucht"
>Gaslucht melden
</a>
</li>
<li class="footer-menu-item">
<a href="https://www.liander.nl/storingen/wizard-meterstoring"
>Meterstoring
</a>
</li>
<li class="footer-menu-item">
<a
href="https://www.liander.nl/onderhoud-storingen/tips-bij-storingen"
>Tips bij storing
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- mobile menu -->
<div
class="footer-nav-links d-flex d-md-none mobile row justify-content-center"
>
<div class="accordion accordion-flush col-10" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button
class="accordion-button collapsed px-0"
type="button"
data-bs-toggle="collapse"
data-bs-target="#flush-collapseOne"
aria-expanded="false"
aria-controls="flush-collapseOne"
>
Consument
</button>
</h2>
<div
id="flush-collapseOne"
class="accordion-collapse collapse"
data-bs-parent="#accordionFlushExample"
>
<div class="accordion-body px-0 bg-secondary-90">
<ul class="footer-mobile-menu">
<li class="footer-mobile-menu-item">
<a class="h4" href="https://www.liander.nl/consument"
>Consument</a
>
</li>
<li class="footer-mobile-menu-item">
<a href="https://www.liander.nl/consument/aansluitingen"
>Uw aansluiting
</a>
</li>
<li class="footer-mobile-menu-item">
<a href="https://www.liander.nl/consument/slimme_meter"
>Slimme meter
</a>
</li>
<li class="footer-mobile-menu-item">
<a
href="https://www.liander.nl/consument/energie-opwekken-en-terugleveren"
>Energie opwekken
</a>
</li>
<li class="footer-mobile-menu-item">
<a
href="https://www.liander.nl/consument/aansluitingen/afsluiting"
>Voorkom afsluiting
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button
class="accordion-button collapsed px-0"
type="button"
data-bs-toggle="collapse"
data-bs-target="#flush-collapseTwo"
aria-expanded="false"
aria-controls="flush-collapseTwo"
>
Storingen
</button>
</h2>
<div
id="flush-collapseTwo"
class="accordion-collapse collapse"
data-bs-parent="#accordionFlushExample"
>
<div class="accordion-body px-0 bg-secondary-90">
<ul class="footer-mobile-menu">
<li class="footer-mobile-menu-item">
<a class="h4" href="https://www.liander.nl/storingen"
>Storingen</a
>
</li>
<li class="footer-mobile-menu-item">
<a href="https://www.liander.nl/storing-melden"
>Storing melden
</a>
</li>
<li class="footer-mobile-menu-item">
<a href="https://www.liander.nl/gasstoring-gaslucht"
>Gaslucht melden
</a>
</li>
<li class="footer-mobile-menu-item">
<a href="https://www.liander.nl/storingen/wizard-meterstoring"
>Meterstoring
</a>
</li>
<li class="footer-mobile-menu-item">
<a
href="https://www.liander.nl/onderhoud-storingen/tips-bij-storingen"
>Tips bij storing
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="footer-nav-subsection">
<div class="row">
<div class="col">
<div
class="d-flex flex-wrap flex-md-nowrap justify-content-center justify-content-md-between align-items-start"
>
<div class="pr-3 text-center">
<ul class="footer-menu">
<li class="footer-menu-item">Copyright © 2023 Liander</li>
<li class="footer-menu-item">
<a href="https://www.liander.nl/privacystatement">Privacy</a>
</li>
<li class="footer-menu-item">
<a href="https://www.liander.nl/disclaimer">Disclaimer</a>
</li>
<li class="footer-menu-item">
<a
href="https://www.liander.nl/algemene-voorwaarden-overzicht"
>Algemene voorwaarden</a
>
</li>
<li class="footer-menu-item">
<a href="https://www.liander.nl/cookies">Cookies</a>
</li>
<li class="footer-menu-item">
<a target="_blank" href="https://www.alliander.com/nl/"
>Alliander</a
>
</li>
</ul>
</div>
<div>
<div class="d-flex flex-nowrap">
<div class="me-3">
<a href="https://www.facebook.com/LianderNL" title="Facebook"
><svg
fill="white"
height="40"
viewBox="0 0 40 40"
width="40"
xmlns="http://www.w3.org/2000/svg"
class="Icon__y23gw50 Icon_size_lg__y23gw57"
aria-hidden="true"
>
<path
d="m19.9997 3.3335c-9.205 0-16.66669 7.4617-16.66669 16.6667 0 8.355 6.155 15.255 14.17499 16.46v-12.0434h-4.1233v-4.3816h4.1233v-2.915c0-4.8267 2.3517-6.945 6.3633-6.945 1.9217 0 2.9367.1416 3.4184.2066v3.8234h-2.7367c-1.7033 0-2.2983 1.615-2.2983 3.435v2.395h4.9916l-.6766 4.3816h-4.3134v12.0784c8.135-1.1017 14.41-8.0584 14.41-16.495 0-9.205-7.4616-16.6667-16.6666-16.6667z"
></path></svg
></a>
</div>
<div class="me-3">
<a
href="http://www.linkedin.com/company/liander"
title="LinkedIn"
><svg
fill="white"
height="40"
viewBox="0 0 40 40"
width="40"
xmlns="http://www.w3.org/2000/svg"
class="Icon__y23gw50 Icon_size_lg__y23gw57"
aria-hidden="true"
>
<path
d="m31.6667 5h-23.33337c-1.84166 0-3.33333 1.49167-3.33333 3.33333v23.33337c0 1.8416 1.49167 3.3333 3.33333 3.3333h23.33337c1.8416 0 3.3333-1.4917 3.3333-3.3333v-23.33337c0-1.84166-1.4917-3.33333-3.3333-3.33333zm-16.6667 23.3333h-4.205v-11.6666h4.205zm-2.1767-13.805c-1.285 0-2.1433-.8566-2.1433-2 0-1.1433.8567-2 2.285-2 1.285 0 2.1433.8567 2.1433 2 0 1.1434-.8566 2-2.285 2zm17.1767 13.805h-4.07v-6.3766c0-1.7634-1.085-2.17-1.4917-2.17-.4066 0-1.7633.2716-1.7633 2.17v6.3766h-4.205v-11.6666h4.205v1.6283c.5417-.95 1.6267-1.6283 3.6617-1.6283s3.6633 1.6283 3.6633 5.29z"
></path></svg
></a>
</div>
<div class="me-3">
<a href="http://www.twitter.com/LianderNL" title="Twitter"
><svg
width="40"
height="40"
viewBox="0 0 40 40"
fill="white"
xmlns="http://www.w3.org/2000/svg"
class="Icon__y23gw50 Icon_size_lg__y23gw57"
aria-hidden="true"
>
<path
d="M22.8632 17.703L34.0372 5H31.3893L21.687 16.0298L13.9378 5H5L16.7183 21.679L5 35H7.64801L17.8939 23.3522L26.0776 35H35.0154L22.8626 17.703H22.8632ZM19.2364 21.8259L18.0491 20.1651L8.60212 6.94952H12.6693L20.2932 17.6149L21.4805 19.2758L31.3906 33.1391H27.3234L19.2364 21.8266V21.8259Z"
fill="#fff"
></path></svg
></a>
</div>
<div>
<a
href="https://www.instagram.com/liandernl"
title="Instagram"
><svg
fill="white"
height="40"
viewBox="0 0 40 40"
width="40"
xmlns="http://www.w3.org/2000/svg"
class="Icon__y23gw50 Icon_size_lg__y23gw57"
aria-hidden="true"
>
<path
d="m13.0002 3.33325h14c5.3333 0 9.6666 4.33334 9.6666 9.66665v14c0 2.5638-1.0184 5.0225-2.8313 6.8354-1.8128 1.8128-4.2716 2.8313-6.8353 2.8313h-14c-5.33337 0-9.6667-4.3333-9.6667-9.6667v-14c0-2.5637 1.01845-5.0225 2.8313-6.83535s4.2716-2.8313 6.8354-2.8313zm-.3334 3.33334c-1.5913 0-3.11739.63214-4.24261 1.75735-1.12522 1.12522-1.75736 2.65136-1.75736 4.24266v14.6667c0 3.3166 2.68333 6 5.99997 6h14.6667c1.5913 0 3.1174-.6322 4.2426-1.7574 1.1253-1.1252 1.7574-2.6514 1.7574-4.2426v-14.6667c0-3.31668-2.6833-6.00001-6-6.00001zm16.0834 2.49999c.5525 0 1.0824.2195 1.4731.6102.3907.39072.6102.92062.6102 1.47312 0 .5526-.2195 1.0825-.6102 1.4732s-.9206.6102-1.4731.6102c-.5526 0-1.0825-.2195-1.4732-.6102s-.6102-.9206-.6102-1.4732c0-.5525.2195-1.0824.6102-1.47312.3907-.3907.9206-.6102 1.4732-.6102zm-8.75 2.50002c2.2101 0 4.3297.878 5.8925 2.4408s2.4408 3.6824 2.4408 5.8925c0 2.2102-.878 4.3298-2.4408 5.8926s-3.6824 2.4408-5.8925 2.4408c-2.2102 0-4.3298-.878-5.8926-2.4408s-2.4408-3.6824-2.4408-5.8926c0-2.2101.878-4.3297 2.4408-5.8925s3.6824-2.4408 5.8926-2.4408zm0 3.3333c-1.3261 0-2.5979.5268-3.5356 1.4645s-1.4644 2.2094-1.4644 3.5355.5267 2.5979 1.4644 3.5356c.9377.9376 2.2095 1.4644 3.5356 1.4644 1.326 0 2.5978-.5268 3.5355-1.4644.9377-.9377 1.4645-2.2095 1.4645-3.5356s-.5268-2.5978-1.4645-3.5355-2.2095-1.4645-3.5355-1.4645z"
></path></svg
></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>