Bootstrap footer

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

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


Basic Footer

                      
<!-- Footer -->
<Footer color="blue" class="font-small pt-4 mt-4">
  <container class="text-left">
    <row>
      <column sm="6">
        <h5 class="title">Footer Content</h5>
        <p>Here you can use rows and columns here to organize your footer content.</p>
      </column>
      <column sm="6">
        <h5 class="title">Links</h5>
        <ul>
          <li class="list-unstyled"><a href="#!">Link 1</a></li>
          <li class="list-unstyled"><a href="#!">Link 2</a></li>
          <li class="list-unstyled"><a href="#!">Link 3</a></li>
          <li class="list-unstyled"><a href="#!">Link 4</a></li>
        </ul>
      </column>
    </row>
  </container>
  <div class="footer-copyright text-center py-3">
    <container fluid>
      &copy; 2018 Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>
    </container>
  </div>
</Footer>
<!-- Footer -->
                
            

Advanced Footer MDB Pro component

                      
<!-- Footer -->
<Footer color="stylish-color-dark" class="page-footer font-small pt-4 mt-4">
  <container class="text-left">
      <row>
      <column md="6">
          <h5 class="text-uppercase mb-4 mt-3 font-weight-bold">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>
      </column>
      <hr class="clearfix w-100 d-md-none"/>
      <column md="2">
          <h5 class="text-uppercase mb-4 mt-3 font-weight-bold">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>
      </column>
      <hr class="clearfix w-100 d-md-none"/>
      <column md="2">
          <h5 class="text-uppercase mb-4 mt-3 font-weight-bold">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>
      </column>
      <hr class="clearfix w-100 d-md-none"/>
      <column md="2">
          <h5 class="text-uppercase mb-4 mt-3 font-weight-bold">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>
      </column>
      </row>
  </container>
  <hr/>
  <div class="text-center py-3">
      <ul class="list-unstyled list-inline mb-0">
          <li class="list-inline-item">
              <h5 class="mb-1">Register for free</h5>
          </li>
          <li class="list-inline-item"><a href="#" class="btn btn-danger btn-rounded">Sign up!</a></li>
      </ul>
  </div>
  <hr/>
  <div class="text-center">
      <ul class="list-unstyled list-inline">
          <li class="list-inline-item"><a class="btn-floating btn-sm btn-fb mx-1"><i class="fa fa-facebook"> </i></a></li>
          <li class="list-inline-item"><a class="btn-floating btn-sm btn-tw mx-1"><i class="fa fa-twitter"> </i></a></li>
          <li class="list-inline-item"><a class="btn-floating btn-sm btn-gplus mx-1"><i class="fa fa-google-plus"> </i></a></li>
          <li class="list-inline-item"><a class="btn-floating btn-sm btn-li mx-1"><i class="fa fa-linkedin"> </i></a></li>
          <li class="list-inline-item"><a class="btn-floating btn-sm btn-dribbble mx-1"><i class="fa fa-dribbble"> </i></a></li>
      </ul>
  </div>
  <div class="footer-copyright text-center py-3">
      <container fluid>
          &copy; 2018 Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>
      </container>
  </div>
</Footer>
<!-- Footer -->
                      
                  

Purple Panel Footer MDB Pro component

                      
<!-- Footer -->
<Footer color="unique-color-dark" class="page-footer font-small pt-0">
  <div style="backgroundColor: #6351ce">
      <container class="text-left">
          <row class="py-4 d-flex align-items-center">
              <column md="6" lg="5" class="text-center text-md-left mb-4 mb-md-0">
                  <h6 class="mb-0 white-text">Get connected with us on social networks!</h6>
              </column>
              <column md="6" lg="7" class="text-center text-md-right">
                  <a class="fb-ic ml-0"><i class="fa fa-facebook white-text mr-lg-4"> </i></a>
                  <a class="tw-ic"><i class="fa fa-twitter white-text mr-lg-4"> </i></a>
                  <a class="gplus-ic"><i class="fa fa-google-plus white-text mr-lg-4"> </i></a>
                  <a class="li-ic"><i class="fa fa-linkedin white-text mr-lg-4"> </i></a>
                  <a class="ins-ic"><i class="fa fa-instagram white-text mr-lg-4"> </i></a>
              </column>
          </row>
      </container>
  </div>
  <container class="mt-5 mb-4 text-center text-md-left">
      <row class="mt-3">
          <column md="3" lg="4" xl="3" class="mb-4">
              <h6 class="text-uppercase font-weight-bold"><strong>Company name</strong></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>
          </column>
          <column md="2" lg="2" xl="2" class="mb-4">
              <h6 class="text-uppercase font-weight-bold"><strong>Products</strong></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>
          </column>
          <column md="3" lg="2" xl="2" class="mb-4">
              <h6 class="text-uppercase font-weight-bold"><strong>Useful links</strong></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>
          </column>
          <column md="4" lg="3" xl="3" class="mb-4">
              <h6 class="text-uppercase font-weight-bold"><strong>Contact</strong></h6>
              <hr class="deep-purple accent-2 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px"/>
              <p><i class="fa fa-home mr-3"></i> New York, NY 10012, US</p>
              <p><i class="fa fa-envelope mr-3"></i> info@example.com</p>
              <p><i class="fa fa-phone mr-3"></i> + 01 234 567 88</p>
              <p><i class="fa fa-print mr-3"></i> + 01 234 567 89</p>
          </column>
      </row>
  </container>
  <div class="footer-copyright text-center py-3">
      <container fluid>
          &copy; 2018 Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>
      </container>
  </div>
</Footer>
<!-- Footer -->
                      
                  

Teal Panel Footer MDB Pro component

                      
<!-- Footer -->
<Footer color="blue-grey" class="page-footer font-small lighten-5 pt-0">
  <div style="backgroundColor: '#21d192'">
      <container class="text-left">
          <row class="py-4 d-flex align-items-center">
              <column md="6" lg="5" class="text-center text-md-left mb-4 mb-md-0">
                  <h6 class="mb-0 white-text">Get connected with us on social networks!</h6>
              </column>
              <column md="6" lg="7" class="text-center text-md-right">
                  <a class="fb-ic ml-0"><i class="fa fa-facebook white-text mr-lg-4"> </i></a>
                  <a class="tw-ic"><i class="fa fa-twitter white-text mr-lg-4"> </i></a>
                  <a class="gplus-ic"><i class="fa fa-google-plus white-text mr-lg-4"> </i></a>
                  <a class="li-ic"><i class="fa fa-linkedin white-text mr-lg-4"> </i></a>
                  <a class="ins-ic"><i class="fa fa-instagram white-text mr-lg-4"> </i></a>
              </column>
          </row>
      </container>
  </div>
  <container class="mt-5 mb-4 text-center text-md-left">
      <row class="mt-3">
          <column md="3" lg="4" xl="3" class="mb-4 dark-grey-text">
              <h6 class="text-uppercase font-weight-bold"><strong>Company name</strong></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>
          </column>
          <column md="2" lg="2" xl="2" class="mb-4 dark-grey-text">
              <h6 class="text-uppercase font-weight-bold"><strong>Products</strong></h6>
              <hr class="deep-purple accent-2 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px"/>
              <p><a href="#!" class="dark-grey-text">MDBootstrap</a></p>
              <p><a href="#!" class="dark-grey-text">MDWordPress</a></p>
              <p><a href="#!" class="dark-grey-text">BrandFlow</a></p>
              <p><a href="#!" class="dark-grey-text">Bootstrap Angular</a></p>
          </column>
          <column md="3" lg="2" xl="2" class="mb-4 dark-grey-text">
              <h6 class="text-uppercase font-weight-bold"><strong>Useful links</strong></h6>
              <hr class="deep-purple accent-2 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px"/>
              <p><a href="#!" class="dark-grey-text">Your Account</a></p>
              <p><a href="#!" class="dark-grey-text">Become an Affiliate</a></p>
              <p><a href="#!" class="dark-grey-text">Shipping Rates</a></p>
              <p><a href="#!" class="dark-grey-text">Help</a></p>
          </column>
          <column md="4" lg="3" xl="3" class="mb-4 dark-grey-text">
              <h6 class="text-uppercase font-weight-bold"><strong>Contact</strong></h6>
              <hr class="deep-purple accent-2 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px"/>
              <p><i class="fa fa-home mr-3"></i> New York, NY 10012, US</p>
              <p><i class="fa fa-envelope mr-3"></i> info@example.com</p>
              <p><i class="fa fa-phone mr-3"></i> + 01 234 567 88</p>
              <p><i class="fa fa-print mr-3"></i> + 01 234 567 89</p>
          </column>
      </row>
  </container>
  <div class="footer-copyright text-center py-3">
      <container fluid>
          &copy; 2018 Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>
      </container>
  </div>
</Footer>
<!-- Footer -->
                      
                  

Social Icons Footer MDB Pro component

                      
<!-- Footer -->
<Footer color="indigo" class="font-small pt-0">
  <container>
      <row>
          <column md="12">
              <div class="mb-5 flex-center">
              <a class="fb-ic"><i class="fa fa-facebook fa-lg white-text mr-md-5 mr-3 fa-2x"> </i></a>
              <a class="tw-ic"><i class="fa fa-twitter fa-lg white-text mr-md-5 mr-3 fa-2x"> </i></a>
              <a class="gplus-ic"><i class="fa fa-google-plus fa-lg white-text mr-md-5 mr-3 fa-2x"> </i></a>
              <a class="li-ic"><i class="fa fa-linkedin fa-lg white-text mr-md-5 mr-3 fa-2x"> </i></a>
              <a class="ins-ic"><i class="fa fa-instagram fa-lg white-text mr-md-5 mr-3 fa-2x"> </i></a>
              <a class="pin-ic"><i class="fa fa-pinterest fa-lg white-text fa-2x"> </i></a>
              </div>
          </column>
      </row>
  </container>
  <div class="footer-copyright text-center py-3">
      <container fluid>
          &copy; 2018 Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>
      </container>
  </div>
</Footer>
<!-- Footer -->
                      
                  

Stylish Color Footer MDB Pro component

                      
<!-- Footer -->
<Footer color="stylish-color-dark" class="font-small pt-4 mt-4">
  <container class="text-center text-md-left">
      <row class="text-center text-md-left mt-3 pb-3">
          <column md="3" lg="3" xl="3" class="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>
          </column>
          <hr class="w-100 clearfix d-md-none"/>
          <column md="2" lg="2" xl="2" class="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>
          </column>
          <hr class="w-100 clearfix d-md-none"/>
          <column md="3" lg="2" xl="2" class="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>
          </column>
          <hr class="w-100 clearfix d-md-none"/>
          <column md="4" lg="3" xl="3" class="mx-auto mt-3">
              <h6 class="text-uppercase mb-4 font-weight-bold">Contact</h6>
              <p><i class="fa fa-home mr-3"></i> New York, NY 10012, US</p>
              <p><i class="fa fa-envelope mr-3"></i> info@gmail.com</p>
              <p><i class="fa fa-phone mr-3"></i> + 01 234 567 88</p>
              <p><i class="fa fa-print mr-3"></i> + 01 234 567 89</p>
          </column>
      </row>
      <hr/>
      <row class="d-flex align-items-center">
          <column md="8" lg="8">
              <p class="text-center text-md-left grey-text">&copy; 2018 Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a></p>
          </column>
          <column md="4" lg="4" class="ml-lg-0">
              <div class="text-center text-md-right">
                  <ul class="list-unstyled list-inline">
                      <li class="list-inline-item"><a class="btn-floating btn-sm rgba-white-slight mx-1"><i class="fa fa-facebook"></i></a></li>
                      <li class="list-inline-item"><a class="btn-floating btn-sm rgba-white-slight mx-1"><i class="fa fa-twitter"></i></a></li>
                      <li class="list-inline-item"><a class="btn-floating btn-sm rgba-white-slight mx-1"><i class="fa fa-google-plus"></i></a></li>
                      <li class="list-inline-item"><a class="btn-floating btn-sm rgba-white-slight mx-1"><i class="fa fa-linkedin"></i></a></li>
                  </ul>
              </div>
          </column>
      </row>
  </container>
</Footer>
<!-- Footer -->
                      
                  

Indigo Color Footer MDB Pro component


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.


                      
<!-- Footer -->
<Footer color="indigo" class="font-small pt-0">
  <container>
      <row class="pt-5 mb-3 text-center d-flex justify-content-center">
          <column md="2" class="b-3">
              <h6 class="title font-weight-bold"><a href="#!">About us</a></h6>
          </column>
          <column md="2" class="b-3">
              <h6 class="title font-weight-bold"><a href="#!">Products</a></h6>
          </column>
          <column md="2" class="b-3">
              <h6 class="title font-weight-bold"><a href="#!">Awards</a></h6>
          </column>
          <column md="2" class="b-3">
              <h6 class="title font-weight-bold"><a href="#!">Help</a></h6>
          </column>
          <column md="2" class="b-3">
              <h6 class="title font-weight-bold"><a href="#!">Contact</a></h6>
          </column>
      </row>
      <hr class="rgba-white-light" style="margin: '0 15%'"/>
      <row class="d-flex text-center justify-content-center mb-md-0 mb-4">
          <column md="8" sm="12" class="mt-5">
              <p style="lineHeight: '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>
          </column>
      </row>
      <hr class="clearfix d-md-none rgba-white-light" style="margin: '10% 15% 5%'"/>
      <row class="pb-3">
          <column md="12">
              <div class="mb-5 flex-center">
                  <a class="fb-ic"><i class="fa fa-facebook fa-lg white-text mr-md-4"> </i></a>
                  <a class="tw-ic"><i class="fa fa-twitter fa-lg white-text mr-md-4"> </i></a>
                  <a class="gplus-ic"><i class="fa fa-google-plus fa-lg white-text mr-md-4"> </i></a>
                  <a class="li-ic"><i class="fa fa-linkedin fa-lg white-text mr-md-4"> </i></a>
                  <a class="ins-ic"><i class="fa fa-instagram fa-lg white-text mr-md-4"> </i></a>
                  <a class="pin-ic"><i class="fa fa-pinterest fa-lg white-text"> </i></a>
              </div>
          </column>
      </row>
  </container>
  <div class="footer-copyright text-center py-3">
      <container fluid>
          &copy; 2018 Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>
      </container>
  </div>
</Footer>
<!-- Footer -->
                      
                  

Gently Gray Footer MDB Pro component

Footer Content

Here you can use rows and columns here to organize your footer content.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum.



Address
  • New York, NY 10012, US

  • info@example.com

  • + 01 234 567 88

  • + 01 234 567 89


Follow Us
                      
<!-- Footer -->
<Footer color="mdb-color" class="font-small lighten-3 pt-4 mt-4">
  <container class="text-center text-md-left">
    <row class="my-4">
      <column md="4" lg="4">
        <h5 class="text-uppercase mb-4 font-weight-bold">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, error amet numquam iure provident
            voluptate esse quasi, veritatis totam voluptas nostrum. </p>
      </column>
      <hr class="clearfix w-100 d-md-none"/>
      <column md="2" lg="2" class="ml-auto">
        <h5 class="text-uppercase mb-4 font-weight-bold">About</h5>
        <ul class="list-unstyled">
          <p><a href="#!">PROJECTS</a></p>
          <p><a href="#!">ABOUT US</a></p>
          <p><a href="#!">BLOG</a></p>
          <p><a href="#!">AWARDS</a></p>
        </ul>
      </column>
      <hr class="clearfix w-100 d-md-none"/>
      <column md="5" lg="3">
        <h5 class="text-uppercase mb-4 font-weight-bold">Address</h5>
        <p><i class="fa fa-home mr-3"></i> New York, NY 10012, US</p>
        <p><i class="fa fa-envelope mr-3"></i> info@example.com</p>
        <p><i class="fa fa-phone mr-3"></i> + 01 234 567 88</p>
        <p><i class="fa fa-print mr-3"></i> + 01 234 567 89</p>
      </column>
      <hr class="clearfix w-100 d-md-none"/>
      <column md="2" lg="2" class="text-center">
        <h5 class="text-uppercase mb-4 font-weight-bold">About</h5>
        <div class="mt-2 ">
          <a type="button" class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"></i></a>
          <a type="button" class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"></i></a>
          <a type="button" class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"></i></a>
          <a type="button" class="btn-floating btn-small btn-dribbble"><i class="fa fa-dribbble"></i></a>
        </div>
      </column>
      <hr class="clearfix w-100 d-md-none"/>
    </row>
  </container>
  <div class="footer-copyright text-center py-3">
    <container fluid>
        &copy; 2018 Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>
    </container>
  </div>
</Footer>
<!-- Footer -->