Footer

eCommerce footer

Set of design blocks dedicated to building eCommerce footer component.


Basic example



          <!-- Footer -->
          <footer class="page-footer font-small elegant-color">

            <div class="color-primary">
              <div class="container">

                <!-- Grid row-->
                <div class="row py-4 d-flex align-items-center">

                  <!-- Grid column -->
                  <div class="col-md-6 col-lg-5 text-center text-md-left mb-4 mb-md-0">
                    <h6 class="mb-0">Get connected with us on social networks!</h6>
                  </div>
                  <!-- Grid column -->

                  <!-- Grid column -->
                  <div class="col-md-6 col-lg-7 text-center text-md-right">

                    <!-- Facebook -->
                    <a class="fb-ic">
                      <i class="fab fa-facebook-f white-text mr-4"> </i>
                    </a>
                    <!-- Twitter -->
                    <a class="tw-ic">
                      <i class="fab fa-twitter white-text mr-4"> </i>
                    </a>
                    <!-- Google +-->
                    <a class="gplus-ic">
                      <i class="fab fa-google-plus-g white-text mr-4"> </i>
                    </a>
                    <!--Linkedin -->
                    <a class="li-ic">
                      <i class="fab fa-linkedin-in white-text mr-4"> </i>
                    </a>
                    <!--Instagram-->
                    <a class="ins-ic">
                      <i class="fab fa-instagram white-text"> </i>
                    </a>

                  </div>
                  <!-- Grid column -->

                </div>
                <!-- Grid row-->

              </div>
            </div>

            <!-- Footer Links -->
            <div class="container text-center text-md-left pt-4 pt-md-5">

              <!-- Grid row -->
              <div class="row mt-1 mt-md-0 mb-4 mb-md-0">

                <!-- Grid column -->
                <div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">

                  <!-- Links -->
                  <h5>About me</h5>
                  <hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">

                  <p class="foot-desc mb-0">Here you can use rows and columns to organize your footer content. Lorem
                    ipsum dolor sit amet,
                    consectetur
                    adipisicing elit.</p>

                </div>
                <!-- Grid column -->

                <hr class="clearfix w-100 d-md-none">

                <!-- Grid column -->
                <div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">

                  <!-- Links -->
                  <h5>Products</h5>
                  <hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">

                  <ul class="list-unstyled foot-desc">
                    <li class="mb-2">
                      <a href="#!">MDBootstrap</a>
                    </li>
                    <li class="mb-2">
                      <a href="#!">MDWordPress</a>
                    </li>
                    <li class="mb-2">
                      <a href="#!">BrandFlow</a>
                    </li>
                    <li class="mb-2">
                      <a href="#!">Bootstrap Angular</a>
                    </li>
                  </ul>

                </div>
                <!-- Grid column -->

                <hr class="clearfix w-100 d-md-none">

                <!-- Grid column -->
                <div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">

                  <!-- Links -->
                  <h5>Useful links</h5>
                  <hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">

                  <ul class="list-unstyled foot-desc">
                    <li class="mb-2">
                      <a href="#!">Your Account</a>
                    </li>
                    <li class="mb-2">
                      <a href="#!">Become an Affiliate</a>
                    </li>
                    <li class="mb-2">
                      <a href="#!">Shipping Rates</a>
                    </li>
                    <li class="mb-2">
                      <a href="#!">Help</a>
                    </li>
                  </ul>

                </div>
                <!-- Grid column -->

                <hr class="clearfix w-100 d-md-none">

                <!-- Grid column -->
                <div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">

                  <!-- Links -->
                  <h5>Contacts</h5>
                  <hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">

                  <ul class="fa-ul foot-desc ml-4">
                    <li class="mb-2"><span class="fa-li"><i class="far fa-map"></i></span>New York, Avenue Street 10
                    </li>
                    <li class="mb-2"><span class="fa-li"><i class="fas fa-phone-alt"></i></span>042 876 836 908</li>
                    <li class="mb-2"><span class="fa-li"><i class="far fa-envelope"></i></span>company@example.com</li>
                    <li><span class="fa-li"><i class="far fa-clock"></i></span>Monday - Friday: 10-17</li>
                  </ul>

                </div>
                <!-- Grid column -->

              </div>
              <!-- Grid row -->

            </div>
            <!-- Footer Links -->

            <!-- Copyright -->
            <div class="footer-copyright text-center py-3">© 2020 Copyright:
              <a href="https://mdbootstrap.com/"> MDBootstrap.com</a>
            </div>
            <!-- Copyright -->

          </footer>
          <!-- Footer -->

        

Supported content

Footers come with built-in support for a handful of sub-components. Choose from the following as needed:

The background color of the Copyright section will be automatically changed to a slightly darker shade than Footer itself.

You can easily change the color of the Footer by using one of the 300 predefined colors of the MDBootstrap palette.



          <!-- Footer -->
          <footer class="page-footer font-small elegant-color">

            <!-- Copyright -->
            <div class="footer-copyright text-center py-3">© 2020 Copyright:
              <a href="https://mdbootstrap.com/"> MDBootstrap.com</a>
            </div>
            <!-- Copyright -->

          </footer>
          <!-- Footer -->

        

You can adjust the number of the columns by using Bootstrap Grid.

On the smaller devices, dividers between columns become visible.



          <!-- Footer -->
          <footer class="page-footer font-small elegant-color">

            <!-- Footer Links -->
            <div class="container text-center text-md-left pt-4 pt-md-5">

              <!-- Grid row -->
              <div class="row mt-1 mt-md-0 mb-4 mb-md-0">

                <!-- Grid column -->
                <div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">

                  <!-- Links -->
                  <h5>Links</h5>
                  <hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">

                  <ul class="list-unstyled">
                    <li>
                      <a href="#!">Very long link 1</a>
                    </li>
                    <li>
                      <a href="#!">Very long link 2</a>
                    </li>
                    <li>
                      <a href="#!">Very long link 3</a>
                    </li>
                    <li>
                      <a href="#!">Very long link 4</a>
                    </li>
                  </ul>

                </div>
                <!-- Grid column -->

                <hr class="clearfix w-100 d-md-none">

                <!-- Grid column -->
                <div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">

                  <!-- Links -->
                  <h5>Links</h5>
                  <hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">

                  <ul class="list-unstyled">
                    <li>
                      <a href="#!">Link 1</a>
                    </li>
                    <li>
                      <a href="#!">Link 2</a>
                    </li>
                    <li>
                      <a href="#!">Link 3</a>
                    </li>
                    <li>
                      <a href="#!">Link 4</a>
                    </li>
                  </ul>

                </div>
                <!-- Grid column -->

                <hr class="clearfix w-100 d-md-none">

                <!-- Grid column -->
                <div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">

                  <!-- Links -->
                  <h5>Links</h5>
                  <hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">

                  <ul class="list-unstyled">
                    <li>
                      <a href="#!">Link 1</a>
                    </li>
                    <li>
                      <a href="#!">Link 2</a>
                    </li>
                    <li>
                      <a href="#!">Link 3</a>
                    </li>
                    <li>
                      <a href="#!">Link 4</a>
                    </li>
                  </ul>

                </div>
                <!-- Grid column -->

                <hr class="clearfix w-100 d-md-none">

                <!-- Grid column -->
                <div class="col-md-3 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">

                  <!-- Links -->
                  <h5>Links</h5>
                  <hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">

                  <ul class="list-unstyled">
                    <li>
                      <a href="#!">Link 1</a>
                    </li>
                    <li>
                      <a href="#!">Link 2</a>
                    </li>
                    <li>
                      <a href="#!">Link 3</a>
                    </li>
                    <li>
                      <a href="#!">Link 4</a>
                    </li>
                  </ul>

                </div>
                <!-- Grid column -->

              </div>
              <!-- Grid row -->

            </div>
            <!-- Footer Links -->

            <!-- Copyright -->
            <div class="footer-copyright text-center py-3">© 2020 Copyright:
              <a href="https://mdbootstrap.com/"> MDBootstrap.com</a>
            </div>
            <!-- Copyright -->

          </footer>
          <!-- Footer -->

        

Text

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

Footer text 1

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis asperiores pariatur consequuntur, officia deserunt, laboriosam sed atque error esse perferendis nam ut saepe iste iure voluptatibus laborum iusto vitae magni.


Footer text 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta ducimus magni ea mollitia placeat harum doloribus aut, qui expedita ipsam sed cum, modi totam sit libero? Quis, hic inventore! Impedit?



          <!-- Footer -->
          <footer class="page-footer font-small elegant-color">

            <!-- Footer Links -->
            <div class="container text-center text-md-left pt-4 pt-md-5">

              <!-- Grid row -->
              <div class="row mt-1 mt-md-0 mb-4 mb-md-0">

                <!-- Grid column -->
                <div class="col-md-6 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">

                  <!-- Links -->
                  <h5>Footer text 1</h5>
                  <hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">

                  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis asperiores pariatur consequuntur,
                    officia
                    deserunt, laboriosam sed atque error esse perferendis nam ut saepe iste iure voluptatibus laborum
                    iusto
                    vitae magni.</p>

                </div>
                <!-- Grid column -->

                <hr class="clearfix w-100 d-md-none">

                <!-- Grid column -->
                <div class="col-md-6 mx-auto mt-3 mt-md-0 mb-0 mb-md-4">

                  <!-- Links -->
                  <h5>Footer text 2</h5>
                  <hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">

                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta ducimus magni ea mollitia placeat
                    harum
                    doloribus aut, qui expedita ipsam sed cum, modi totam sit libero? Quis, hic inventore! Impedit?</p>

                </div>
                <!-- Grid column -->

              </div>
              <!-- Grid row -->

            </div>
            <!-- Footer Links -->

            <!-- Copyright -->
            <div class="footer-copyright text-center py-3">© 2020 Copyright:
              <a href="https://mdbootstrap.com/"> MDBootstrap.com</a>
            </div>
            <!-- Copyright -->

          </footer>
          <!-- Footer -->

        

Forms

At your disposal is a variety of the inputs and predefined forms.



        <!-- Footer -->
        <footer class="page-footer font-small elegant-color">

          <!-- Footer Links -->
          <div class="container text-center text-md-left pt-3 pt-md-5">

            <!-- Grid row -->
            <div class="row mt-1 mt-md-0">

              <!-- Grid column -->
              <div class="col-md-6 mx-auto mt-4 pt-2 mt-md-0 pt-md-0 mb-4 pb-2 mb-md-5 pb-md-0">

                <div class="md-form md-outline my-0 d-flex justify-content-between align-items-center">
                  <input type="text" id="search12" placeholder="Search" class="form-control form-control-sm mb-0">
                  <a href="#!" class="btn btn-flat btn-md px-3 waves-effect"><i class="fas fa-search fa-lg"></i></a>
                </div>

              </div>
              <!-- Grid column -->

              <hr class="clearfix w-100 d-md-none">

              <!-- Grid column -->
              <div class="col-md-6 mx-auto mt-4 pt-2 mt-md-0 pt-md-0 mb-5">

                <div class="md-form md-outline input-group my-0">
                  <input type="text" id="email12" class="form-control form-control-sm" placeholder="Your email" aria-label="Your email" aria-describedby="basic-addon2">
                  <div class="input-group-append">
                    <button class="btn btn-sm btn-outline-white my-0" type="button" style="padding-top: 8px; padding-bottom: 7px;">Sign up</button>
                  </div>
                </div>

              </div>
              <!-- Grid column -->

            </div>
            <!-- Grid row -->

          </div>
          <!-- Footer Links -->

          <!-- Copyright -->
          <div class="footer-copyright text-center py-3">© 2020 Copyright:
            <a href="https://mdbootstrap.com/"> MDBootstrap.com</a>
          </div>
          <!-- Copyright -->

        </footer>
        <!-- Footer -->

      

Images

For more advanced image options have a look at Images docs .



          <!-- Footer -->
          <footer class="page-footer font-small elegant-color">

            <!-- Footer Links -->
            <div class="container text-center text-md-left pt-4 pt-md-5">

              <!-- Links -->
              <h5>Latest projects</h5>
              <hr class="color-primary mb-4 mt-0 d-inline-block mx-auto w-60">

              <!-- Grid row -->
              <div class="row row-cols-2 row-cols-md-4 row-cols-lg-8 mb-4 pb-2">

                <!-- Grid column -->
                <div class="col mb-3">

                  <img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/Photos/Square/5.jpg"
                    alt="Project image">

                </div>
                <!-- Grid column -->

                <!-- Grid column -->
                <div class="col mb-3">

                  <img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/Photos/Square/3.jpg"
                    alt="Project image">

                </div>
                <!-- Grid column -->

                <!-- Grid column -->
                <div class="col mb-3">

                  <img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/Photos/Square/1.jpg"
                    alt="Project image">

                </div>
                <!-- Grid column -->

                <!-- Grid column -->
                <div class="col mb-3">

                  <img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/Photos/Square/6.jpg"
                    alt="Project image">

                </div>
                <!-- Grid column -->

                <!-- Grid column -->
                <div class="col mb-3">

                  <img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/Photos/Square/2.jpg"
                    alt="Project image">

                </div>
                <!-- Grid column -->

                <!-- Grid column -->
                <div class="col mb-3">

                  <img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/Photos/Square/8.jpg"
                    alt="Project image">

                </div>
                <!-- Grid column -->

                <!-- Grid column -->
                <div class="col mb-3">

                  <img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/Photos/Square/4.jpg"
                    alt="Project image">

                </div>
                <!-- Grid column -->

                <!-- Grid column -->
                <div class="col mb-3">

                  <img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/Photos/Square/7.jpg"
                    alt="Project image">

                </div>
                <!-- Grid column -->

              </div>
              <!-- Grid row -->

            </div>
            <!-- Footer Links -->

            <!-- Copyright -->
            <div class="footer-copyright text-center py-3">© 2020 Copyright:
              <a href="https://mdbootstrap.com/"> MDBootstrap.com</a>
            </div>
            <!-- Copyright -->

          </footer>
          <!-- Footer -->

        

Iframe / video

For more advanced iframe / video options have a look at Embeds docs .



          <!-- Footer -->
          <footer class="page-footer font-small elegant-color">

            <!-- Footer Links -->
            <div class="container pt-5 mb-3 pb-2">

              <div class="row d-flex justify-content-center">

                <!--Grid column-->
                <div class="col-md-8 col-lg-6">

                  <!-- Video -->
                  <div class="embed-responsive embed-responsive-16by9 mb-4">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/vlDzYIIOYmM"
                      allowfullscreen></iframe>
                  </div>

                </div>
                <!--Grid column-->

              </div>
              <!--Grid row-->

            </div>
            <!-- Footer Links -->

            <!-- Copyright -->
            <div class="footer-copyright text-center py-3">© 2020 Copyright:
              <a href="https://mdbootstrap.com/"> MDBootstrap.com</a>
            </div>
            <!-- Copyright -->

          </footer>
          <!-- Footer -->

        

Icons

You can use one of the 600 available icons. Learn more in the Icons docs.



          <!-- Footer -->
          <footer class="page-footer font-small elegant-color">

            <!-- Footer Links -->
            <div class="container">

              <div class="row d-flex justify-content-center">

                <!--Grid column-->
                <div class="col d-flex justify-content-center my-5 pt-1">

                  <!-- Facebook -->
                  <a class="fb-ic">
                    <i class="fab fa-facebook-f fa-lg white-text mx-3 mx-md-4 fa-2x"> </i>
                  </a>
                  <!-- Twitter -->
                  <a class="tw-ic">
                    <i class="fab fa-twitter fa-lg white-text mx-3 mx-md-4 fa-2x"> </i>
                  </a>
                  <!-- Google +-->
                  <a class="gplus-ic">
                    <i class="fab fa-google-plus-g fa-lg white-text mx-3 mx-md-4 fa-2x"> </i>
                  </a>
                  <!--Linkedin -->
                  <a class="li-ic">
                    <i class="fab fa-linkedin-in fa-lg white-text mx-3 mx-md-4 fa-2x"> </i>
                  </a>
                  <!--Instagram-->
                  <a class="ins-ic">
                    <i class="fab fa-instagram fa-lg white-text mx-3 mx-md-4 fa-2x"> </i>
                  </a>
                  <!--Pinterest-->
                  <a class="pin-ic">
                    <i class="fab fa-pinterest fa-lg white-text mx-3 mx-md-4 fa-2x"> </i>
                  </a>

                </div>
                <!--Grid column-->

              </div>
              <!--Grid row-->

            </div>
            <!-- Footer Links -->

            <!-- Copyright -->
            <div class="footer-copyright text-center py-3">© 2020 Copyright:
              <a href="https://mdbootstrap.com/"> MDBootstrap.com</a>
            </div>
            <!-- Copyright -->

          </footer>
          <!-- Footer -->

        

Buttons MDB Pro component

For more advanced Buttons options have a look at the Buttons docs .



          <!-- Footer -->
          <footer class="page-footer font-small elegant-color">

            <!-- Footer Links -->
            <div class="container">

              <div class="row">

                <!--Grid column-->
                <div class="col my-5">

                  <!-- Call to action -->
                  <ul class="list-unstyled d-flex justify-content-center align-items-center mb-0">
                    <li>
                      <h5 class="mb-0 mr-3">Register for free</h5>
                    </li>
                    <li>
                      <a href="#!" class="btn btn-outline-white btn-rounded">Sign up!</a>
                    </li>
                  </ul>
                  <!-- Call to action -->

                </div>
                <!--Grid column-->

              </div>
              <!--Grid row-->

            </div>
            <!-- Footer Links -->

            <!-- Copyright -->
            <div class="footer-copyright text-center py-3">© 2020 Copyright:
              <a href="https://mdbootstrap.com/"> MDBootstrap.com</a>
            </div>
            <!-- Copyright -->

          </footer>
          <!-- Footer -->

        

Social buttons MDB Pro component

For more advanced Social Buttons options have a look at the Social Buttons docs .



          <!-- Footer -->
          <footer class="page-footer font-small elegant-color">

            <!-- Footer Links -->
            <div class="container">

              <div class="row">

                <!--Grid column-->
                <div class="col my-5">

                  <!-- Social buttons -->
                  <ul class="list-unstyled list-inline text-center mb-0">
                    <li class="list-inline-item">
                      <a class="btn-floating btn-fb mx-1">
                        <i class="fab fa-facebook-f"></i>
                      </a>
                    </li>
                    <li class="list-inline-item">
                      <a class="btn-floating btn-tw mx-1">
                        <i class="fab fa-twitter"></i>
                      </a>
                    </li>
                    <li class="list-inline-item">
                      <a class="btn-floating btn-gplus mx-1">
                        <i class="fab fa-google-plus-g"></i>
                      </a>
                    </li>
                    <li class="list-inline-item">
                      <a class="btn-floating btn-li mx-1">
                        <i class="fab fa-linkedin-in"></i>
                      </a>
                    </li>
                    <li class="list-inline-item">
                      <a class="btn-floating btn-dribbble mx-1">
                        <i class="fab fa-dribbble"></i>
                      </a>
                    </li>
                  </ul>
                  <!-- Social buttons -->

                </div>
                <!--Grid column-->

              </div>
              <!--Grid row-->

            </div>
            <!-- Footer Links -->

            <!-- Copyright -->
            <div class="footer-copyright text-center py-3">© 2020 Copyright:
              <a href="https://mdbootstrap.com/"> MDBootstrap.com</a>
            </div>
            <!-- Copyright -->

          </footer>
          <!-- Footer -->