Footer

Footer - Bootstrap 5 & Material Design 2.0 component

A footer is an additional navigation component. It can hold links, buttons, company info, copyrights, forms, and many other elements.


Basic example

A basic example of the simple footer with text, links and copyright section.

The background color is set via CSS class .bg-light. You can set your own color choosing from MDB color palette or by setting a completely custom color via inline CSS, for example style="background-color: #9933CC;"

We put a mask on the copyrights section using RGBA code to outstand it. You can change the intensity of its color by manipulating the last value in the RGBA code.

Footer Content

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!

© 2020 Copyright: MDBootstrap.com

          <!-- Footer -->
          <footer class="bg-light text-center text-lg-left">
            <!-- 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-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 mb-0">Links</h5>

                  <ul class="list-unstyled">
                    <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-->
            </div>
            <!-- Grid container -->

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

Supported content

Footers can hold multiple different components. Below a few of the most common examples of footer usage.

Copyrights

As mentioned before - we put a mask on the copyrights section using RGBA code to outstand it. You can change the intensity of its color by manipulating the last value in the RGBA code.


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

Text

For more advanced text options have a look at the Typography docs or Text utilities docs .

Footer text

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!

Footer text

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!

© 2020 Copyright: MDBootstrap.com

            <footer class="bg-light text-center text-lg-left">
              <!-- 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 text</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-6 col-md-12 mb-4 mb-md-0">
                    <h5 class="text-uppercase">Footer text</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-->
                </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-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>
              </div>
              <!-- Copyright -->
            </footer>
          

Forms

Sign up for our newsletter

© 2020 Copyright: MDBootstrap.com

            <footer class="bg-light text-center text-lg-left">
              <!-- Grid container -->
              <div class="container p-4 pb-0">
                <form action="">
                  <!--Grid row-->
                  <div class="row">
                    <!--Grid column-->
                    <div class="col-auto mb-4 mb-md-0">
                      <p class="pt-2"><strong>Sign up for our newsletter</strong></p>
                    </div>
                    <!--Grid column-->

                    <!--Grid column-->
                    <div class="col-md-5 col-12 mb-4 mb-md-0">
                      <!-- 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 mb-4 mb-md-0">
                      <!-- Submit button -->
                      <button type="submit" class="btn btn-primary mb-4">
                        Subscribe
                      </button>
                    </div>
                    <!--Grid column-->
                  </div>
                  <!--Grid row-->
                </form>
              </div>
              <!-- Grid container -->

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

Colors

As mentioned before - the background color is set via CSS class .bg-light. You can set your own color choosing from MDB color palette or by setting a completely custom color via inline CSS, for example style="background-color: #9933CC;"

When changing the color of the footer to the darker remember to change also the color of the containing elements.

In the example below, we add .text-white color to change the color of the text to white and we replace .text-dark class in the links to .text-white as well.

Footer Content

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!

© 2020 Copyright: MDBootstrap.com

          <footer class="bg-primary text-white text-center text-lg-left">
            <!-- 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>