Overview
API

Angular Bootstrap Footer

Angular Footer - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Angular Bootstrap footer is an additional navigation for the website. It can hold links, buttons, company info, copyrights, forms and many other elements.

You can set the color of the footer by adding one of classes from our color palette.

Just like any other components of MDBootstrap Angular, Footers are responsive by default.

Basic footer

Add or remove .font-small class to the <footer> element to change the size of the fonts inside the Footer.

HTML

        
            
          <!-- Footer -->
          <footer class="page-footer font-small blue pt-4">

            <!-- Footer Links -->
            <div class="container-fluid text-center text-md-left">

              <!-- Grid row -->
              <div class="row">

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

                  <!-- Content -->
                  <h5 class="text-uppercase">Footer Content</h5>
                  <p>Here you can use rows and columns here to organize your footer content.</p>

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

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

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

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

                    <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 -->

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

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

                    <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 -->

Supported content

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

Copyright

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

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

HTML

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

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

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

Links

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

On the smaller devices, dividers between columns become visible.

HTML

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

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

              <!-- Grid row -->
              <div class="row">

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

                  <!-- Links -->
                  <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

                  <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">

                  <!-- Links -->
                  <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

                  <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">

                  <!-- Links -->
                  <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

                  <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">

                  <!-- Links -->
                  <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

                  <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 Typography docs or Text utilities docs .

HTML

        
            
          <!-- Footer -->
          <footer class="page-footer font-small teal pt-4">

            <!-- Footer Text -->
            <div class="container-fluid text-center text-md-left">

              <!-- Grid row -->
              <div class="row">

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

                  <!-- Content -->
                  <h5 class="text-uppercase font-weight-bold">Footer text 1</h5>
                  <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita sapiente sint, nulla,
                    nihil repudiandae commodi voluptatibus corrupti animi sequi aliquid magnam debitis,
                    maxime quam recusandae harum esse fugiat. Itaque, culpa?
                  </p>

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

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

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

                  <!-- Content -->
                  <h5 class="text-uppercase font-weight-bold">Footer text 2</h5>
                  <p>
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
                    Optio deserunt fuga perferendis modi earum commodi aperiam temporibus quod nulla nesciunt aliquid debitis ullam omnis quos ipsam,
                    aspernatur id excepturi hic.
                  </p>

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

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

            </div>
            <!-- Footer Text -->

            <!-- 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.

HTML

        
            
          <!-- Footer -->
          <footer class="page-footer font-small special-color-dark pt-4">

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

              <!--Grid row-->
              <div class="row">

                <!--Grid column-->
                <div class="col-md-6 mb-4">

                  <!-- Form -->
                  <form class="form-inline">
                    <input class="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search" aria-label="Search">
                    <mdb-icon fas icon="search" aria-hidden="true"></mdb-icon>
                  </form>
                  <!-- Form -->

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

                <!--Grid column-->
                <div class="col-md-6 mb-4">

                  <form class="input-group">
                    <input 
                      type="text"
                      class="form-control form-control-sm"
                      placeholder="Your email"
                      aria-label="Your email"
                      aria-describedby="basic-addon2"
                    >
                    <div class="input-group-append">
                      <button mdbBtn color="white" outline="true" size="sm" type="button" mdbWavesEffect>Sign up</button>
                    </div>
                  </form>

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

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

            </div>
            <!-- Footer Elements -->

            <!-- 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 .

HTML

        
            
          <!-- Footer -->
          <footer class="page-footer font-small mdb-color lighten-3 pt-4">

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

              <!--Grid row-->
              <div class="row">

                <!--Grid column-->
                <div class="col-lg-2 col-md-12 mb-4">

                  <!--Image-->
                  <div class="view overlay z-depth-1-half">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(73).webp" class="img-fluid" alt="">
                    <a>
                      <div class="mask rgba-white-light" mdbWavesEffect></div>
                    </a>
                  </div>

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

                <!--Grid column-->
                <div class="col-lg-2 col-md-6 mb-4">

                  <!--Image-->
                  <div class="view overlay z-depth-1-half">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(78).webp" class="img-fluid" alt="">
                    <a>
                      <div class="mask rgba-white-light" mdbWavesEffect></div>
                    </a>
                  </div>

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

                <!--Grid column-->
                <div class="col-lg-2 col-md-6 mb-4">

                  <!--Image-->
                  <div class="view overlay z-depth-1-half">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(79).webp" class="img-fluid" alt="">
                    <a>
                      <div class="mask rgba-white-light" mdbWavesEffect></div>
                    </a>
                  </div>

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

                <!--Grid column-->
                <div class="col-lg-2 col-md-12 mb-4">

                  <!--Image-->
                  <div class="view overlay z-depth-1-half">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(81).webp" class="img-fluid" alt="">
                    <a>
                      <div class="mask rgba-white-light" mdbWavesEffect></div>
                    </a>
                  </div>

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

                <!--Grid column-->
                <div class="col-lg-2 col-md-6 mb-4">

                  <!--Image-->
                  <div class="view overlay z-depth-1-half">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(82).webp" class="img-fluid" alt="">
                    <a>
                      <div class="mask rgba-white-light" mdbWavesEffect></div>
                    </a>
                  </div>

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

                <!--Grid column-->
                <div class="col-lg-2 col-md-6 mb-4">

                  <!--Image-->
                  <div class="view overlay z-depth-1-half">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(84).webp" class="img-fluid" alt="">
                    <a>
                      <div class="mask rgba-white-light" mdbWavesEffect></div>
                    </a>
                  </div>

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

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

            </div>
            <!-- Footer Elements -->

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

          </footer>

Iframe / video

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

HTML

        
            
          <!-- Footer -->
          <footer class="page-footer font-small mdb-color darken-3 pt-4">

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

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

                <!--Grid column-->
                <div class="col-md-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 Elements -->

            <!-- 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.

HTML

        
            
          <!-- Footer -->
          <footer class="page-footer font-small cyan darken-3">

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

              <!-- Grid row-->
              <div class="row">

                <!-- Grid column -->
                <div class="col-md-12 py-5">
                  <div class="mb-5 flex-center">

                    <!-- Facebook -->
                    <a class="fb-ic">
                      <mdb-icon fab icon="facebook" size="2x" class="white-text mr-md-5 mr-3"></mdb-icon>
                    </a>
                    <!-- Twitter -->
                    <a class="tw-ic">
                        <mdb-icon fab icon="twitter" size="2x" class="white-text mr-md-5 mr-3"></mdb-icon>
                    </a>
                    <!-- Google +-->
                    <a class="gplus-ic">
                        <mdb-icon fab fab icon="google-plus" size="2x" class="white-text mr-md-5 mr-3"></mdb-icon>
                    </a>
                    <!--Linkedin -->
                    <a class="li-ic">
                        <mdb-icon fab icon="linkedin" size="2x" class="white-text mr-md-5 mr-3"></mdb-icon>
                    </a>
                    <!--Instagram-->
                    <a class="ins-ic">
                        <mdb-icon fab icon="instagram" size="2x" class="white-text mr-md-5 mr-3"></mdb-icon>
                    </a>
                    <!--Pinterest-->
                    <a class="pin-ic">
                        <mdb-icon fab icon="pinterest" size="2x" class="white-text mr-md-5 mr-3"></mdb-icon>
                    </a>
                  </div>
                </div>
                <!-- Grid column -->

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

            </div>
            <!-- Footer Elements -->

            <!-- 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 Buttons docs .

HTML

        
            
          <!-- Footer -->
          <footer class="page-footer font-small unique-color-dark pt-4">

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

              <!-- Call to action -->
              <ul class="list-unstyled list-inline text-center py-2">
                <li class="list-inline-item">
                  <h5 class="mb-1">Register for free</h5>
                </li>
                <li class="list-inline-item">
                  <a href="#!" mdbBtn color="white" outline="true" rounded="true" class="waves-light" mdbWavesEffect>Sign up!</a>
                </li>
              </ul>
              <!-- Call to action -->

            </div>
            <!-- Footer Elements -->

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

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

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

HTML

        
            
          <!-- Footer -->
          <footer class="page-footer font-small special-color-dark pt-4">

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

              <ul class="list-unstyled list-inline text-center">
                <li class="list-inline-item">
                  <a mdbBtn floating="true" color="fb" class="mx-1" mdbWavesEffect>
                    <mdb-icon fab icon="facebook"></mdb-icon>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a mdbBtn floating="true" color="tw" class="mx-1" mdbWavesEffect>
                    <mdb-icon fab icon="twitter"></mdb-icon>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a mdbBtn floating="true" color="gplus" class="mx-1" mdbWavesEffect>
                    <mdb-icon fab fab icon="google-plus"></mdb-icon>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a mdbBtn floating="true" color="li" class="mx-1" mdbWavesEffect>
                    <mdb-icon fab icon="linkedin"></mdb-icon>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a mdbBtn floating="true" color="dribbble" class="mx-1" mdbWavesEffect>
                    <mdb-icon fab icon="dribbble"></mdb-icon>
                  </a>
                </li>
              </ul>

            </div>
            <!-- Footer Elements -->

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

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

Sticky footer

Add .fixed-bottom class to the <footer> element to pin Footer to the bottom of the screen.

To learn more have a look at Position utilities docs .

HTML

        
            
          <!-- Footer -->
          <footer class="page-footer font-small blue fixed-bottom">

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

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

Advanced footer MDB Pro component

HTML

        
            
          <!-- Footer -->
          <footer class="page-footer font-small stylish-color-dark pt-4">

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

              <!-- Grid row -->
              <div class="row">

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

                  <!-- Content -->
                  <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Footer Content</h5>
                  <p>Here you can use rows and columns here 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-2 mx-auto">

                  <!-- Links -->
                  <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

                  <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-2 mx-auto">

                  <!-- Links -->
                  <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

                  <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-2 mx-auto">

                  <!-- Links -->
                  <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

                  <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 -->

            <hr>

            <!-- Call to action -->
            <ul class="list-unstyled list-inline text-center py-2">
              <li class="list-inline-item">
                <h5 class="mb-1">Register for free</h5>
              </li>
              <li class="list-inline-item">
                <a href="#!" mdbBtn color="danger" rounded="true" mdbWavesEffect>Sign up!</a>
              </li>
            </ul>
            <!-- Call to action -->

            <hr>

            <!-- Social buttons -->
            <ul class="list-unstyled list-inline text-center">
              <li class="list-inline-item">
                <a mdbBtn floating="true" color="fb" class="mx-1" mdbWavesEffect>
                  <mdb-icon fab icon="facebook"></mdb-icon>
                </a>
              </li>
              <li class="list-inline-item">
                <a mdbBtn floating="true" color="tw" class="mx-1" mdbWavesEffect>
                  <mdb-icon fab icon="twitter"></mdb-icon>
                </a>
              </li>
              <li class="list-inline-item">
                <a mdbBtn floating="true" color="gplus" class="mx-1" mdbWavesEffect>
                  <mdb-icon fab fab icon="google-plus"></mdb-icon>
                </a>
              </li>
              <li class="list-inline-item">
                <a mdbBtn floating="true" color="li" class="mx-1" mdbWavesEffect>
                  <mdb-icon fab icon="linkedin"></mdb-icon>
                </a>
              </li>
              <li class="list-inline-item">
                <a mdbBtn floating="true" color="dribbble" class="mx-1" mdbWavesEffect>
                  <mdb-icon fab icon="dribbble"></mdb-icon>
                </a>
              </li>
            </ul>
            <!-- Social buttons -->

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

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

Purple Panel footer MDB Pro component

HTML

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

            <div style="background-color: #6351ce;">
              <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">
                      <mdb-icon fab icon="facebook" class="white-text mr-4"></mdb-icon>
                    </a>
                    <!-- Twitter -->
                    <a class="tw-ic">
                      <mdb-icon fab icon="twitter" class="white-text mr-4"></mdb-icon>
                    </a>
                    <!-- Google +-->
                    <a class="gplus-ic">
                      <mdb-icon fab fab icon="google-plus" class="white-text mr-4"></mdb-icon>
                    </a>
                    <!--Linkedin -->
                    <a class="li-ic">
                      <mdb-icon fab icon="linkedin" class="white-text mr-4"></mdb-icon>
                    </a>
                    <!--Instagram-->
                    <a class="ins-ic">
                      <mdb-icon fab icon="instagram" class="white-text mr-4"></mdb-icon>
                    </a>

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

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

              </div>
            </div>

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

              <!-- Grid row -->
              <div class="row mt-3">

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

                  <!-- Content -->
                  <h6 class="text-uppercase font-weight-bold">Company name</h6>
                  <hr class="deep-purple accent-2 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
                  <p>Here you can use rows and columns here to organize your footer content. Lorem ipsum dolor sit amet, consectetur adipisicing
                    elit.
                  </p>

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

                <!-- Grid column -->
                <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">

                  <!-- Links -->
                  <h6 class="text-uppercase font-weight-bold">Products</h6>
                  <hr class="deep-purple accent-2 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
                  <p>
                    <a href="#!">MDBootstrap</a>
                  </p>
                  <p>
                    <a href="#!">MDWordPress</a>
                  </p>
                  <p>
                    <a href="#!">BrandFlow</a>
                  </p>
                  <p>
                    <a href="#!">Bootstrap Angular</a>
                  </p>

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

                <!-- Grid column -->
                <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">

                  <!-- Links -->
                  <h6 class="text-uppercase font-weight-bold">Useful links</h6>
                  <hr class="deep-purple accent-2 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
                  <p>
                    <a href="#!">Your Account</a>
                  </p>
                  <p>
                    <a href="#!">Become an Affiliate</a>
                  </p>
                  <p>
                    <a href="#!">Shipping Rates</a>
                  </p>
                  <p>
                    <a href="#!">Help</a>
                  </p>

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

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

                  <!-- Links -->
                  <h6 class="text-uppercase font-weight-bold">Contact</h6>
                  <hr class="deep-purple accent-2 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
                  <p>
                    <mdb-icon fas icon="home" class="mr-3"></mdb-icon> New York, NY 10012, US
                  </p>
                  <p>
                    <mdb-icon fas icon="envelope" class="mr-3"></mdb-icon> info@example.com
                  </p>
                  <p>
                    <mdb-icon fas icon="phone" class="mr-3"></mdb-icon> + 01 234 567 88
                  </p>
                  <p>
                    <mdb-icon fas icon="print" class="mr-3"></mdb-icon> + 01 234 567 88
                  </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 -->

Teal Panel footer MDB Pro component

HTML

        
            
          <!-- Footer -->
          <footer class="page-footer font-small blue-grey lighten-5">

            <div style="background-color: #21d192;">
              <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">
                      <mdb-icon fab icon="facebook" class="white-text mr-4"></mdb-icon>
                    </a>
                    <!-- Twitter -->
                    <a class="tw-ic">
                      <mdb-icon fab icon="twitter" class="white-text mr-4"></mdb-icon>
                    </a>
                    <!-- Google +-->
                    <a class="gplus-ic">
                      <mdb-icon fab fab icon="google-plus" class="white-text mr-4"></mdb-icon>
                    </a>
                    <!--Linkedin -->
                    <a class="li-ic">
                      <mdb-icon fab icon="linkedin" class="white-text mr-4"></mdb-icon>
                    </a>
                    <!--Instagram-->
                    <a class="ins-ic">
                      <mdb-icon fab icon="instagram" class="white-text mr-4"></mdb-icon>
                    </a>

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

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

              </div>
            </div>

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

              <!-- Grid row -->
              <div class="row mt-3 dark-grey-text">

                <!-- Grid column -->
                <div class="col-md-3 col-lg-4 col-xl-3 mb-4">

                  <!-- Content -->
                  <h6 class="text-uppercase font-weight-bold">Company name</h6>
                  <hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
                  <p>Here you can use rows and columns here to organize your footer content. Lorem ipsum dolor sit amet, consectetur adipisicing
                    elit.
                  </p>

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

                <!-- Grid column -->
                <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">

                  <!-- Links -->
                  <h6 class="text-uppercase font-weight-bold">Products</h6>
                  <hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
                  <p>
                    <a class="dark-grey-text" href="#!">MDBootstrap</a>
                  </p>
                  <p>
                    <a class="dark-grey-text" href="#!">MDWordPress</a>
                  </p>
                  <p>
                    <a class="dark-grey-text" href="#!">BrandFlow</a>
                  </p>
                  <p>
                    <a class="dark-grey-text" href="#!">Bootstrap Angular</a>
                  </p>

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

                <!-- Grid column -->
                <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">

                  <!-- Links -->
                  <h6 class="text-uppercase font-weight-bold">Useful links</h6>
                  <hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
                  <p>
                    <a class="dark-grey-text" href="#!">Your Account</a>
                  </p>
                  <p>
                    <a class="dark-grey-text" href="#!">Become an Affiliate</a>
                  </p>
                  <p>
                    <a class="dark-grey-text" href="#!">Shipping Rates</a>
                  </p>
                  <p>
                    <a class="dark-grey-text" href="#!">Help</a>
                  </p>

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

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

                  <!-- Links -->
                  <h6 class="text-uppercase font-weight-bold">Contact</h6>
                  <hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
                  <p>
                    <mdb-icon fas icon="home" class="mr-3"></mdb-icon> New York, NY 10012, US
                  </p>
                  <p>
                    <mdb-icon fas icon="envelope" class="mr-3"></mdb-icon> info@example.com
                  </p>
                  <p>
                    <mdb-icon fas icon="phone" class="mr-3"></mdb-icon> + 01 234 567 88
                  </p>
                  <p>
                    <mdb-icon fas icon="print" class="mr-3"></mdb-icon> + 01 234 567 88
                  </p>

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

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

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

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

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

Stylish color footer MDB Pro component

HTML

        
            
          <!-- Footer -->
          <footer class="page-footer font-small mdb-color pt-4">

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

              <!-- Footer links -->
              <div class="row text-center text-md-left mt-3 pb-3">

                <!-- Grid column -->
                <div class="col-md-3 col-lg-3 col-xl-3 mx-auto mt-3">
                  <h6 class="text-uppercase mb-4 font-weight-bold">Company name</h6>
                  <p>Here you can use rows and columns here to organize your footer content. Lorem ipsum dolor sit amet, consectetur adipisicing
                    elit.
                  </p>
                </div>
                <!-- Grid column -->

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

                <!-- Grid column -->
                <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mt-3">
                  <h6 class="text-uppercase mb-4 font-weight-bold">Products</h6>
                  <p>
                    <a href="#!">MDBootstrap</a>
                  </p>
                  <p>
                    <a href="#!">MDWordPress</a>
                  </p>
                  <p>
                    <a href="#!">BrandFlow</a>
                  </p>
                  <p>
                    <a href="#!">Bootstrap Angular</a>
                  </p>
                </div>
                <!-- Grid column -->

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

                <!-- Grid column -->
                <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mt-3">
                  <h6 class="text-uppercase mb-4 font-weight-bold">Useful links</h6>
                  <p>
                    <a href="#!">Your Account</a>
                  </p>
                  <p>
                    <a href="#!">Become an Affiliate</a>
                  </p>
                  <p>
                    <a href="#!">Shipping Rates</a>
                  </p>
                  <p>
                    <a href="#!">Help</a>
                  </p>
                </div>

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

                <!-- Grid column -->
                <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mt-3">
                  <h6 class="text-uppercase mb-4 font-weight-bold">Contact</h6>
                  <p>
                    <mdb-icon fas icon="home" class="mr-3"></mdb-icon> New York, NY 10012, US
                  </p>
                  <p>
                    <mdb-icon fas icon="envelope" class="mr-3"></mdb-icon> info@example.com
                  </p>
                  <p>
                    <mdb-icon fas icon="phone" class="mr-3"></mdb-icon> + 01 234 567 88
                  </p>
                  <p>
                    <mdb-icon fas icon="print" class="mr-3"></mdb-icon> + 01 234 567 88
                  </p>
                </div>
                <!-- Grid column -->

              </div>
              <!-- Footer links -->

              <hr>

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

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

                  <!--Copyright-->
                  <p class="text-center text-md-left">© 2020 Copyright:
                    <a href="https://mdbootstrap.com/">
                      <strong> MDBootstrap.com</strong>
                    </a>
                  </p>

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

                <!-- Grid column -->
                <div class="col-md-5 col-lg-4 ml-lg-0">

                  <!-- Social buttons -->
                  <div class="text-center text-md-right">
                    <ul class="list-unstyled list-inline">
                      <li class="list-inline-item">
                        <a mdbBtn floating="true" size="sm" class="rgba-white-slight mx-1" mdbWavesEffect>
                          <mdb-icon fab icon="facebook"></mdb-icon>
                        </a>
                      </li>
                      <li class="list-inline-item">
                        <a mdbBtn floating="true" size="sm" class="rgba-white-slight mx-1" mdbWavesEffect>
                          <mdb-icon fab icon="twitter"></mdb-icon>
                        </a>
                      </li>
                      <li class="list-inline-item">
                        <a mdbBtn floating="true" size="sm" class="rgba-white-slight mx-1" mdbWavesEffect>
                          <mdb-icon fab fab icon="google-plus"></mdb-icon>
                        </a>
                      </li>
                      <li class="list-inline-item">
                        <a mdbBtn floating="true" size="sm" class="rgba-white-slight mx-1" mdbWavesEffect>
                          <mdb-icon fab icon="linkedin"></mdb-icon>
                        </a>
                      </li>
                    </ul>
                  </div>

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

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

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

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

Indigo color footer MDB Pro component

HTML

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

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

              <!-- Grid row-->
              <div class="row text-center d-flex justify-content-center pt-5 mb-3">

                <!-- Grid column -->
                <div class="col-md-2 mb-3">
                  <h6 class="text-uppercase font-weight-bold">
                    <a href="#!">About us</a>
                  </h6>
                </div>
                <!-- Grid column -->

                <!-- Grid column -->
                <div class="col-md-2 mb-3">
                  <h6 class="text-uppercase font-weight-bold">
                    <a href="#!">Products</a>
                  </h6>
                </div>
                <!-- Grid column -->

                <!-- Grid column -->
                <div class="col-md-2 mb-3">
                  <h6 class="text-uppercase font-weight-bold">
                    <a href="#!">Awards</a>
                  </h6>
                </div>
                <!-- Grid column -->

                <!-- Grid column -->
                <div class="col-md-2 mb-3">
                  <h6 class="text-uppercase font-weight-bold">
                    <a href="#!">Help</a>
                  </h6>
                </div>
                <!-- Grid column -->

                <!-- Grid column -->
                <div class="col-md-2 mb-3">
                  <h6 class="text-uppercase font-weight-bold">
                    <a href="#!">Contact</a>
                  </h6>
                </div>
                <!-- Grid column -->

              </div>
              <!-- Grid row-->
              <hr class="rgba-white-light" style="margin: 0 15%;">

              <!-- Grid row-->
              <div class="row d-flex text-center justify-content-center mb-md-0 mb-4">

                <!-- Grid column -->
                <div class="col-md-8 col-12 mt-5">
                  <p style="line-height: 1.7rem">
                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
                    eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
                    voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur.
                  </p>
                </div>
                <!-- Grid column -->

              </div>
              <!-- Grid row-->
              <hr class="clearfix d-md-none rgba-white-light" style="margin: 10% 15% 5%;">

              <!-- Grid row-->
              <div class="row pb-3">

                <!-- Grid column -->
                <div class="col-md-12">

                  <div class="mb-5 flex-center">

                    <!-- Facebook -->
                    <a class="fb-ic">
                      <mdb-icon fab icon="facebook" size="lg" class="white-text mr-4"></mdb-icon>
                    </a>
                    <!-- Twitter -->
                    <a class="tw-ic">
                      <mdb-icon fab icon="twitter" size="lg" class="white-text mr-4"></mdb-icon>
                    </a>
                    <!-- Google +-->
                    <a class="gplus-ic">
                      <mdb-icon fab fab icon="google-plus" size="lg" class="white-text mr-4"></mdb-icon>
                    </a>
                    <!--Linkedin -->
                    <a class="li-ic">
                      <mdb-icon fab icon="linkedin" size="lg" class="white-text mr-4"></mdb-icon>
                    </a>
                    <!--Instagram-->
                    <a class="ins-ic">
                      <mdb-icon fab icon="instagram" size="lg" class="white-text mr-4"></mdb-icon>
                    </a>
                    <!--Pinterest-->
                    <a class="pin-ic">
                      <mdb-icon fab icon="pinterest" size="lg" class="white-text mr-4"></mdb-icon>
                    </a>

                  </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 -->

Gently gray footer MDB Pro component

HTML

        
            
          <!-- Footer -->
          <footer class="page-footer font-small mdb-color lighten-3 pt-4">

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

              <!-- Grid row -->
              <div class="row">

                <!-- Grid column -->
                <div class="col-md-4 col-lg-3 mr-auto my-md-4 my-0 mt-4 mb-1">

                  <!-- Content -->
                  <h5 class="font-weight-bold text-uppercase mb-4">Footer Content</h5>
                  <p>Here you can use rows and columns here to organize your footer content.</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit amet numquam iure provident voluptate esse quasi,
                    veritatis totam voluptas nostrum.</p>

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

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

                <!-- Grid column -->
                <div class="col-md-2 col-lg-2 mx-auto my-md-4 my-0 mt-4 mb-1">

                  <!-- Links -->
                  <h5 class="font-weight-bold text-uppercase mb-4">About</h5>

                  <ul class="list-unstyled">
                    <li>
                      <p>
                        <a href="#!">PROJECTS</a>
                      </p>
                    </li>
                    <li>
                      <p>
                        <a href="#!">ABOUT US</a>
                      </p>
                    </li>
                    <li>
                      <p>
                        <a href="#!">BLOG</a>
                      </p>
                    </li>
                    <li>
                      <p>
                        <a href="#!">AWARDS</a>
                      </p>
                    </li>
                  </ul>

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

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

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

                  <!-- Contact details -->
                  <h5 class="font-weight-bold text-uppercase mb-4">Address</h5>

                  <ul class="list-unstyled">
                    <li>
                      <p>
                        <mdb-icon fas icon="home" class="mr-3"></mdb-icon> New York, NY 10012, US
                      </p>
                    </li>
                    <li>
                      <p>
                        <mdb-icon fas icon="envelope" class="mr-3"></mdb-icon> info@example.com
                      </p>
                    </li>
                    <li>
                      <p>
                        <mdb-icon fas icon="phone" class="mr-3"></mdb-icon> + 01 234 567 88
                      </p>
                    </li>
                    <li>
                      <p>
                        <mdb-icon fas icon="print" class="mr-3"></mdb-icon> + 01 234 567 88
                      </p>
                    </li>
                  </ul>

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

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

                <!-- Grid column -->
                <div class="col-md-2 col-lg-2 text-center mx-auto my-4">

                  <!-- Social buttons -->
                  <h5 class="font-weight-bold text-uppercase mb-4">Follow Us</h5>

                  <!-- Facebook -->
                  <a mdbBtn floating="true" type="button" color="btn-fb" mdbWavesEffect>
                    <mdb-icon fab icon="facebook"></mdb-icon>
                  </a>
                  <!-- Twitter -->
                  <a type="button" mdbBtn floating="true" color="btn-tw" mdbWavesEffect>
                    <mdb-icon fab icon="twitter"></mdb-icon>
                  </a>
                  <!-- Google +-->
                  <a type="button" mdbBtn floating="true" color="btn-gplus" mdbWavesEffect>
                    <mdb-icon fab fab icon="google-plus"></mdb-icon>
                  </a>
                  <!-- Dribbble -->
                  <a type="button" mdbBtn floating="true" color="btn-dribbble" mdbWavesEffect>
                    <mdb-icon fab icon="dribbble"></mdb-icon>
                  </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 -->

Angular Footer - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of Angular Footer component.

Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

Pro
Free

        
            
          import { WavesModule, ButtonsModule, IconsModule } from 'ng-uikit-pro-standard'

        
            
          import { WavesModule, ButtonsModule, IconsModule } from 'angular-bootstrap-md'

Import example Modules list

Introduction
Modules used