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.
html
<footer class="footer bg-white">
  <div class="container position-relative">
    <a href="#" class="btn footer-btn-to-top bg-white">
      Naar boven
      <span class="far fa-angle-up"></span>
    </a>
    <div class="footer-header">
      <div class="row">
        <div class="col-sm-3">
          <img class="footer-logo" src="/docs/5.0/assets/img/logo_liander.hd.png" alt="">
        </div>
        <div class="col-sm-9">
          <h4 class="text-primary mt-4 mt-sm-0">
            Footer header text
          </h4>
        </div>
      </div>
    </div>
    <div class="footer-nav-links">
      <div class="row">
        <div class="col-12 col-md-3">
          <ul class="footer-menu">
            <li class="footer-menu-caption-item">
              <a href="#">Section 1</a>
            </li>
            <li class="footer-menu-item">
              <a href="#">Link 1.1</a>
            </li>
            <li class="footer-menu-item">
              <a href="#">Link 1.2</a>
            </li>
          </ul>
        </div>
        <div class="col-12 col-md-3">
          <ul class="footer-menu">
            <li class="footer-menu-caption-item">
              <a href="#" class="navbar-link">Section 2</a>
            </li>
            <li class="footer-menu-item">
              <a href="#">Link 2.1</a>
            </li>
          </ul>
        </div>
        <div class="col-12 col-md-3">
          <ul class="footer-menu">
            <li class="footer-menu-caption-item">
              <a href="#" class="navbar-link">Section 3</a>
            </li>
            <li class="footer-menu-item">
              <a href="#">Link 3.1</a>
            </li>
          </ul>
        </div>
        <div class="col-12 col-md-3">
          <ul class="footer-menu">
            <li class="footer-menu-caption-item">
              <a href="#" class="navbar-link">Section 4</a>
            </li>
            <li class="footer-menu-item">
              <a href="#">Link 4.1</a>
            </li>
          </ul>
        </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-between">
            <div class="pr-3">
              <ul class="footer-menu">
                <li class="footer-menu-item">Subsection text</li>
                <li class="footer-menu-item">
                  <a href="#">Subsection link 1</a>
                </li>
                <li class="footer-menu-item">
                  <a href="#">Subsection link 2</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</footer>