<div class="container my-4" style="height: 3000px;">

  <p>

    <strong>To make a footer fixed to the bottom of the page use <code>.fixed-bottom</code> class. See the example

      below.</strong>

  </p>

​

  <p>

    Detailed documentation and more examples you can find in our

    <a href="https://mdbootstrap.com/docs/standard/navigation/footer/" target="_blank"><strong>Footer

      Docs</strong> </a>

  </p>

​

  <hr class="mt-5">

​

  <p>Built with <a target="_blank" href="https://mdbootstrap.com/docs/standard/">Material Design for Bootstrap</a> - free and powerful Bootstrap UI KIT</p>

​

  <a class="btn btn-primary me-2" href="https://mdbootstrap.com/docs/standard/getting-started/installation/" target="_blank" role="button">Download MDB UI KIT<i class="fas fa-download ms-2"></i></a>

  <a class="btn btn-danger me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/" role="button">Learn more</a>

  <a class="btn btn-success me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/getting-started/" role="button">Tutorials</a>

  <a class="btn btn-dark me-2" target="_blank" href="https://github.com/mdbootstrap/mdb-ui-kit" role="button">GitHub<i class="fab fa-github ms-2"></i></a>

​

​

  <hr class="mb-5"/>

​

  <p><strong>Basic example</strong></p>

​

  <p>Scroll down the page to see the footer is always fixed to the bottom of the page.</p>

​

  <p>More footer examples you can find in <a target="_blank"

                                             href="https://mdbootstrap.com/docs/standard/navigation/footer/">Footer Docs</a></p>

​

  <!-- Copy this code to have a working example -->

  <footer class="bg-primary text-white text-center text-lg-start fixed-bottom">

    <!-- Grid container -->

    <div class="container p-4">

      <!--Grid row-->

      <div class="row">

        <!--Grid column-->

        <div class="col-lg-6 col-md-12 mb-4 mb-md-0">

          <h5 class="text-uppercase">Footer Content</h5>

​

          <p>

            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis

            molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam

            voluptatem veniam, est atque cumque eum delectus sint!

          </p>

        </div>

        <!--Grid column-->

​

        <!--Grid column-->

        <div class="col-lg-3 col-md-6 mb-4 mb-md-0">

          <h5 class="text-uppercase">Links</h5>

​

          <ul class="list-unstyled mb-0">

            <li>

              <a href="#!" class="text-white">Link 1</a>

            </li>

            <li>

              <a href="#!" class="text-white">Link 2</a>

            </li>

            <li>

              <a href="#!" class="text-white">Link 3</a>

            </li>

            <li>

              <a href="#!" class="text-white">Link 4</a>

            </li>

          </ul>

        </div>

        <!--Grid column-->

​

        <!--Grid column-->

        <div class="col-lg-3 col-md-6 mb-4 mb-md-0">

          <h5 class="text-uppercase mb-0">Links</h5>

​

          <ul class="list-unstyled">

            <li>

              <a href="#!" class="text-white">Link 1</a>

            </li>

            <li>

              <a href="#!" class="text-white">Link 2</a>

            </li>

            <li>

              <a href="#!" class="text-white">Link 3</a>

            </li>

            <li>

              <a href="#!" class="text-white">Link 4</a>

            </li>

          </ul>

        </div>

        <!--Grid column-->

      </div>

      <!--Grid row-->

    </div>

    <!-- Grid container -->

​

    <!-- Copyright -->

    <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2)">

      © 2020 Copyright:

      <a class="text-white" href="https://mdbootstrap.com/">MDBootstrap.com</a>

    </div>

    <!-- Copyright -->

  </footer>

  <!--/ Copy this code to have a working example -->

​

</div>

​

​