Bootstrap Footer Generator

Generate 150+ examples of page footers for the latest Bootstrap 5 & download them for free.

        
            
              <!-- Footer -->
              <footer class="bg-light text-center">
                <!-- Grid container -->
                <div class="container p-4">
                  <!-- Section: Social media -->
                  <section class="mb-4">
                    <!-- Facebook -->
                    <a
                      class="btn btn-primary btn-floating m-1"
                      style="background-color: #3b5998"
                      href="#!"
                      role="button"
                      ><i class="fab fa-facebook-f"></i
                    ></a>

                    <!-- Twitter -->
                    <a
                      class="btn btn-primary btn-floating m-1"
                      style="background-color: #55acee"
                      href="#!"
                      role="button"
                      ><i class="fab fa-twitter"></i
                    ></a>

                    <!-- Google -->
                    <a
                      class="btn btn-primary btn-floating m-1"
                      style="background-color: #dd4b39"
                      href="#!"
                      role="button"
                      ><i class="fab fa-google"></i
                    ></a>

                    <!-- Instagram -->
                    <a
                      class="btn btn-primary btn-floating m-1"
                      style="background-color: #ac2bac"
                      href="#!"
                      role="button"
                      ><i class="fab fa-instagram"></i
                    ></a>

                    <!-- Linkedin -->
                    <a
                      class="btn btn-primary btn-floating m-1"
                      style="background-color: #0082ca"
                      href="#!"
                      role="button"
                      ><i class="fab fa-linkedin-in"></i
                    ></a>
                    <!-- Github -->
                    <a
                      class="btn btn-primary btn-floating m-1"
                      style="background-color: #333333"
                      href="#!"
                      role="button"
                      ><i class="fab fa-github"></i
                    ></a>
                  </section>
                  <!-- Section: Social media -->

                  <!-- Section: Form -->
                  <section class="">
                    <form action="">
                      <!--Grid row-->
                      <div class="row d-flex justify-content-center">
                        <!--Grid column-->
                        <div class="col-auto">
                          <p class="pt-2">
                            <strong>Sign up for our newsletter</strong>
                          </p>
                        </div>
                        <!--Grid column-->

                        <!--Grid column-->
                        <div class="col-md-5 col-12">
                          <!-- Email input -->
                          <div class="form-outline mb-4">
                            <input
                              type="email"
                              id="form5Example2"
                              class="form-control"
                            />
                            <label class="form-label" for="form5Example2"
                              >Email address</label
                            >
                          </div>
                        </div>
                        <!--Grid column-->

                        <!--Grid column-->
                        <div class="col-auto">

                          <!-- Submit button -->
                          <button v-else type="submit" class="btn btn-primary mb-4">
                            Subscribe
                          </button>
                        </div>
                        <!--Grid column-->
                      </div>
                      <!--Grid row-->
                    </form>
                  </section>
                  <!-- Section: Form -->

                  <!-- Section: Text -->
                  <section class="mb-4">
                    <p>
                      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt
                      distinctio earum repellat quaerat voluptatibus placeat nam,
                      commodi optio pariatur est quia magnam eum harum corrupti dicta,
                      aliquam sequi voluptate quas.
                    </p>
                  </section>
                  <!-- Section: Text -->

                  <!-- Section: Links -->
                  <section class="">
                    <!--Grid row-->
                    <div class="row">
                      <!--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-dark">Link 1</a>
                          </li>
                          <li>
                            <a href="#!" class="text-dark">Link 2</a>
                          </li>
                          <li>
                            <a href="#!" class="text-dark">Link 3</a>
                          </li>
                          <li>
                            <a href="#!" class="text-dark">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">Links</h5>

                        <ul class="list-unstyled mb-0">
                          <li>
                            <a href="#!" class="text-dark">Link 1</a>
                          </li>
                          <li>
                            <a href="#!" class="text-dark">Link 2</a>
                          </li>
                          <li>
                            <a href="#!" class="text-dark">Link 3</a>
                          </li>
                          <li>
                            <a href="#!" class="text-dark">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">Links</h5>

                        <ul class="list-unstyled mb-0">
                          <li>
                            <a href="#!" class="text-dark">Link 1</a>
                          </li>
                          <li>
                            <a href="#!" class="text-dark">Link 2</a>
                          </li>
                          <li>
                            <a href="#!" class="text-dark">Link 3</a>
                          </li>
                          <li>
                            <a href="#!" class="text-dark">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">Links</h5>

                        <ul class="list-unstyled mb-0">
                          <li>
                            <a href="#!" class="text-dark">Link 1</a>
                          </li>
                          <li>
                            <a href="#!" class="text-dark">Link 2</a>
                          </li>
                          <li>
                            <a href="#!" class="text-dark">Link 3</a>
                          </li>
                          <li>
                            <a href="#!" class="text-dark">Link 4</a>
                          </li>
                        </ul>
                      </div>
                      <!--Grid column-->
                    </div>
                    <!--Grid row-->
                  </section>
                  <!-- Section: Links -->
                </div>
                <!-- Grid container -->

                <!-- Copyright -->
                <div
                  class="text-center p-3"
                  style="background-color: rgba(0, 0, 0, 0.2)"
                >
                  © 2021 Copyright:
                  <a class="text-dark" href="https://mdbootstrap.com/"
                    >MDBootstrap.com</a
                  >
                </div>
                <!-- Copyright -->
              </footer>
              <!-- Footer -->
            
        
    

How to use it?

1. Download MDB 5 - free UI KIT

2. Create the Footer you like

3. Copy the generated code and paste it into the MDB project

Docs

Content alignment

{{disabledBasicColorsMessage}}

Basic colors

Custom color