Vue Bootstrap Footer

Vue 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

Vue 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 

        
            
      <template>
        <!-- Footer -->
        <mdb-footer color="blue" class="font-small pt-4 mt-4">
          <mdb-container class="text-left">
            <mdb-row>
              <mdb-col sm="6">
                <h5 class="title">Footer Content</h5>
                <p>Here you can use rows and columns here to organize your footer content.</p>
              </mdb-col>
              <mdb-col 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>
              </mdb-col>
            </mdb-row>
          </mdb-container>
          <div class="footer-copyright text-center py-3">
            <mdb-container fluid>
              &copy; 2020 Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>
            </mdb-container>
          </div>
        </mdb-footer>
        <!-- Footer -->
      </template>
      
        
    
        
            
      <script>
        import {
          mdbFooter,
          mdbContainer,
          mdbRow,
          mdbCol
        } from 'mdbvue';
        export default {
          name: 'FooterPage',
          components: {
            mdbFooter,
            mdbContainer,
            mdbRow,
            mdbCol
          }
        }
      </script>

Advanced Footer MDB Pro component

The advanced footer is enhanced with additional social buttons, a sign-up button, and site map links that can help customers navigate the site.

        
            
        <template>
          <!-- Footer -->
          <mdb-footer color="stylish-color-dark" class="page-footer font-small pt-4 mt-4">
            <mdb-container class="text-left">
              <mdb-row>
                <mdb-col 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>
                </mdb-col>
                <hr class="clearfix w-100 d-md-none" />
                <mdb-col 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>
                </mdb-col>
                <hr class="clearfix w-100 d-md-none" />
                <mdb-col 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>
                </mdb-col>
                <hr class="clearfix w-100 d-md-none" />
                <mdb-col 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>
                </mdb-col>
              </mdb-row>
            </mdb-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="fab fa-facebook"> </i></a></li>
                <li class="list-inline-item">
                  <a class="btn-floating btn-sm btn-tw mx-1"><i class="fab fa-twitter"> </i></a></li>
                <li class="list-inline-item">
                  <a class="btn-floating btn-sm btn-gplus mx-1"><i class="fab fa-google-plus"> </i></a></li>
                <li class="list-inline-item">
                  <a class="btn-floating btn-sm btn-li mx-1"><i class="fab fa-linkedin-in"> </i></a></li>
                <li class="list-inline-item">
                  <a class="btn-floating btn-sm btn-dribbble mx-1"><i class="fab fa-dribbble"> </i></a></li>
              </ul>
            </div>
            <div class="footer-copyright text-center py-3">
              <mdb-container fluid>
                &copy; 2020 Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>
              </mdb-container>
            </div>
          </mdb-footer>
          <!-- Footer -->
        </template>
        
        
    
        
            
        <script>
          import {
            mdbFooter,
            mdbContainer,
            mdbRow,
            mdbCol
          } from 'mdbvue';
          export default {
            name: 'FooterPage',
            components: {
              mdbFooter,
              mdbContainer,
              mdbRow,
              mdbCol
            }
          }
        </script>

Purple Panel Footer MDB Pro component

Purple panel added above the footer highlights social media buttons.

        
            
        <template>
          <!-- Footer -->
          <mdb-footer color="unique-color-dark" class="page-footer font-small pt-0">
            <div style="backgroundColor: #6351ce">
              <mdb-container class="text-left">
                <mdb-row class="py-4 d-flex align-items-center">
                  <mdb-col 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>
                  </mdb-col>
                  <mdb-col md="6" lg="7" class="text-center text-md-right">
                    <a class="fb-ic ml-0"><i class="fab fa-facebook white-text mr-lg-4"> </i></a>
                    <a class="tw-ic"><i class="fab fa-twitter white-text mr-lg-4"> </i></a>
                    <a class="gplus-ic"><i class="fab fa-google-plus white-text mr-lg-4"> </i></a>
                    <a class="li-ic"><i class="fab fa-linkedin-in white-text mr-lg-4"> </i></a>
                    <a class="ins-ic"><i class="fab fa-instagram white-text mr-lg-4"> </i></a>
                  </mdb-col>
                </mdb-row>
              </mdb-container>
            </div>
            <mdb-container class="mt-5 mb-4 text-center text-md-left">
              <mdb-row class="mt-3">
                <mdb-col 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>
                </mdb-col>
                <mdb-col 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>
                </mdb-col>
                <mdb-col 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>
                </mdb-col>
                <mdb-col 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="fas fa-home mr-3"></i> New York, NY 10012, US</p>
                  <p><i class="fas fa-envelope mr-3"></i> info@example.com</p>
                  <p><i class="fas fa-phone mr-3"></i> + 01 234 567 88</p>
                  <p><i class="fas fa-print mr-3"></i> + 01 234 567 89</p>
                </mdb-col>
              </mdb-row>
            </mdb-container>
            <div class="footer-copyright text-center py-3">
              <mdb-container fluid>
                &copy; 2020 Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>
              </mdb-container>
            </div>
          </mdb-footer>
          <!-- Footer -->
        </template>
        
        
    
        
            
        <script>
          import {
            mdbFooter,
            mdbContainer,
            mdbRow,
            mdbCol
          } from 'mdbvue';
          export default {
            name: 'FooterPage',
            components: {
              mdbFooter,
              mdbContainer,
              mdbRow,
              mdbCol
            }
          }
        </script>

Teal Panel Footer MDB Pro component

Teal panel added above the footer highlights social media buttons.

        
            
        <template>
          <!-- Footer -->
          <mdb-footer color="blue-grey" class="page-footer font-small lighten-5 pt-0">
            <div style="backgroundColor: '#21d192'">
              <mdb-container class="text-left">
                <mdb-row class="py-4 d-flex align-items-center">
                  <mdb-col 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>
                  </mdb-col>
                  <mdb-col md="6" lg="7" class="text-center text-md-right">
                    <a class="fb-ic ml-0"><i class="fab fa-facebook white-text mr-lg-4"> </i></a>
                    <a class="tw-ic"><i class="fab fa-twitter white-text mr-lg-4"> </i></a>
                    <a class="gplus-ic"><i class="fab fa-google-plus white-text mr-lg-4"> </i></a>
                    <a class="li-ic"><i class="fab fa-linkedin-in white-text mr-lg-4"> </i></a>
                    <a class="ins-ic"><i class="fab fa-instagram white-text mr-lg-4"> </i></a>
                  </mdb-col>
                </mdb-row>
              </mdb-container>
            </div>
            <mdb-container class="mt-5 mb-4 text-center text-md-left">
              <mdb-row class="mt-3">
                <mdb-col 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>
                </mdb-col>
                <mdb-col 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>
                </mdb-col>
                <mdb-col 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>
                </mdb-col>
                <mdb-col 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="fas fa-home mr-3"></i> New York, NY 10012, US</p>
                  <p><i class="fas fa-envelope mr-3"></i> info@example.com</p>
                  <p><i class="fas fa-phone mr-3"></i> + 01 234 567 88</p>
                  <p><i class="fas fa-print mr-3"></i> + 01 234 567 89</p>
                </mdb-col>
              </mdb-row>
            </mdb-container>
            <div class="footer-copyright text-center py-3">
              <mdb-container fluid>
                &copy; 2020 Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>
              </mdb-container>
            </div>
          </mdb-footer>
          <!-- Footer -->
        </template>
        
        
    
        
            
        <script>
          import {
            mdbFooter,
            mdbContainer,
            mdbRow,
            mdbCol
          } from 'mdbvue';
          export default {
            name: 'FooterPage',
            components: {
              mdbFooter,
              mdbContainer,
              mdbRow,
              mdbCol
            }
          }
        </script>

Social Icons Footer MDB Pro component 

        
            
        <template>
          <!-- Footer -->
          <mdb-footer color="indigo" class="font-small pt-0">
            <mdb-container>
              <mdb-row>
                <mdb-col md="12">
                  <div class="mb-5 flex-center">
                    <a class="fb-ic"><i class="fab fa-facebook fa-lg white-text mr-md-5 mr-3 fa-2x"> </i></a>
                    <a class="tw-ic"><i class="fab fa-twitter fa-lg white-text mr-md-5 mr-3 fa-2x"> </i></a>
                    <a class="gplus-ic"><i class="fab fa-google-plus fa-lg white-text mr-md-5 mr-3 fa-2x"> </i></a>
                    <a class="li-ic"><i class="fab fa-linkedin-in fa-lg white-text mr-md-5 mr-3 fa-2x"> </i></a>
                    <a class="ins-ic"><i class="fab fa-instagram fa-lg white-text mr-md-5 mr-3 fa-2x"> </i></a>
                    <a class="pin-ic"><i class="fab fa-pinterest fa-lg white-text fa-2x"> </i></a>
                  </div>
                </mdb-col>
              </mdb-row>
            </mdb-container>
            <div class="footer-copyright text-center py-3">
              <mdb-container fluid>
                &copy; 2020 Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>
              </mdb-container>
            </div>
          </mdb-footer>
          <!-- Footer -->
        </template>
        
        
    
        
            
        <script>
          import {
            mdbFooter,
            mdbContainer,
            mdbRow,
            mdbCol
          } from 'mdbvue';
          export default {
            name: 'FooterPage',
            components: {
              mdbFooter,
              mdbContainer,
              mdbRow,
              mdbCol
            }
          }
        </script>

Stylish Color Footer MDB Pro component

Stylish footer in a standout color has all the most important footer sections along with social media buttons with a soft shadow added. 

        
            
        <template>
          <!-- Footer -->
          <mdb-footer color="stylish-color-dark" class="font-small pt-4 mt-4">
            <mdb-container class="text-center text-md-left">
              <mdb-row class="text-center text-md-left mt-3 pb-3">
                <mdb-col 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>
                </mdb-col>
                <hr class="w-100 clearfix d-md-none" />
                <mdb-col 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>
                </mdb-col>
                <hr class="w-100 clearfix d-md-none" />
                <mdb-col 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>
                </mdb-col>
                <hr class="w-100 clearfix d-md-none" />
                <mdb-col 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="fas fa-home mr-3"></i> New York, NY 10012, US</p>
                  <p><i class="fas fa-envelope mr-3"></i> info@gmail.com</p>
                  <p><i class="fas fa-phone mr-3"></i> + 01 234 567 88</p>
                  <p><i class="fas fa-print mr-3"></i> + 01 234 567 89</p>
                </mdb-col>
              </mdb-row>
              <hr />
              <mdb-row class="d-flex align-items-center">
                <mdb-col md="8" lg="8">
                  <p class="text-center text-md-left grey-text">&copy; 2020 Copyright: <a href="https://www.MDBootstrap.com">
                          MDBootstrap.com </a></p>
                </mdb-col>
                <mdb-col 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="fab fa-facebook"></i></a></li>
                      <li class="list-inline-item">
                        <a class="btn-floating btn-sm rgba-white-slight mx-1"><i class="fab fa-twitter"></i></a></li>
                      <li class="list-inline-item">
                        <a class="btn-floating btn-sm rgba-white-slight mx-1"><i class="fab fa-google-plus"></i></a>
                      </li>
                      <li class="list-inline-item">
                        <a class="btn-floating btn-sm rgba-white-slight mx-1"><i class="fab fa-linkedin-in"></i></a>
                      </li>
                    </ul>
                  </div>
                </mdb-col>
              </mdb-row>
            </mdb-container>
          </mdb-footer>
          <!-- Footer -->
        </template>
        
        
    
        
            
        <script>
          import {
            mdbFooter,
            mdbContainer,
            mdbRow,
            mdbCol
          } from 'mdbvue';
          export default {
            name: 'FooterPage',
            components: {
              mdbFooter,
              mdbContainer,
              mdbRow,
              mdbCol
            }
          }
        </script>

Indigo Color Footer MDB Pro component

Indigo color footer contains simple site navigation, short description and most important social media buttons.

About us
Products
Awards
Help
Contact

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.

© 2020 Copyright: MDBootstrap.com 
        
            
        <template>
          <!-- Footer -->
          <mdb-footer color="indigo" class="font-small pt-0">
            <mdb-container>
              <mdb-row class="pt-5 mb-3 text-center d-flex justify-content-center">
                <mdb-col md="2" class="b-3">
                  <h6 class="title font-weight-bold"><a href="#!">About us</a></h6>
                </mdb-col>
                <mdb-col md="2" class="b-3">
                  <h6 class="title font-weight-bold"><a href="#!">Products</a></h6>
                </mdb-col>
                <mdb-col md="2" class="b-3">
                  <h6 class="title font-weight-bold"><a href="#!">Awards</a></h6>
                </mdb-col>
                <mdb-col md="2" class="b-3">
                  <h6 class="title font-weight-bold"><a href="#!">Help</a></h6>
                </mdb-col>
                <mdb-col md="2" class="b-3">
                  <h6 class="title font-weight-bold"><a href="#!">Contact</a></h6>
                </mdb-col>
              </mdb-row>
              <hr class="rgba-white-light" style="margin: '0 15%'" />
              <mdb-row class="d-flex text-center justify-content-center mb-md-0 mb-4">
                <mdb-col 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>
                </mdb-col>
              </mdb-row>
              <hr class="clearfix d-md-none rgba-white-light" style="margin: '10% 15% 5%'" />
              <mdb-row class="pb-3">
                <mdb-col md="12">
                  <div class="mb-5 flex-center">
                    <a class="fb-ic"><i class="fab fa-facebook fa-lg white-text mr-md-4"> </i></a>
                    <a class="tw-ic"><i class="fab fa-twitter fa-lg white-text mr-md-4"> </i></a>
                    <a class="gplus-ic"><i class="fab fa-google-plus fa-lg white-text mr-md-4"> </i></a>
                    <a class="li-ic"><i class="fab fa-linkedin-in fa-lg white-text mr-md-4"> </i></a>
                    <a class="ins-ic"><i class="fab fa-instagram fa-lg white-text mr-md-4"> </i></a>
                    <a class="pin-ic"><i class="fab fa-pinterest fa-lg white-text"> </i></a>
                  </div>
                </mdb-col>
              </mdb-row>
            </mdb-container>
            <div class="footer-copyright text-center py-3">
              <mdb-container fluid>
                &copy; 2020 Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>
              </mdb-container>
            </div>
          </mdb-footer>
          <!-- Footer -->
        </template>
        
        
    
        
            
        <script>
          import {
            mdbFooter,
            mdbContainer,
            mdbRow,
            mdbCol
          } from 'mdbvue';
          export default {
            name: 'FooterPage',
            components: {
              mdbFooter,
              mdbContainer,
              mdbRow,
              mdbCol
            }
          }
        </script>

Gently Gray Footer MDB Pro component

Gently gray footer has four columns with short description, about section, addresses and social media links.

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.

About
Address

  • New York, NY 10012, US

  • info@example.com

  • + 01 234 567 88

  • + 01 234 567 89

Follow Us
© 2020 Copyright: MDBootstrap.com 
        
            
        <template>
          <!-- Footer -->
          <mdb-footer color="mdb-color" class="font-small lighten-3 pt-4">
            <mdb-container class="text-center text-md-left">
              <mdb-row class="my-4">
                <mdb-col 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>
                </mdb-col>
                <hr class="clearfix w-100 d-md-none" />
                <mdb-col 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>
                </mdb-col>
                <hr class="clearfix w-100 d-md-none" />
                <mdb-col md="5" lg="3">
                  <h5 class="text-uppercase mb-4 font-weight-bold">Address</h5>
                  <p>
                    <mdb-icon icon="home" class="mr-3" /> New York, NY 10012, US</p>
                  <p>
                    <mdb-icon icon="envelope" class="mr-3" /> info@example.com</p>
                  <p>
                    <mdb-icon icon="phone" class="mr-3" /> + 01 234 567 88</p>
                  <p>
                    <mdb-icon icon="print" class="mr-3" /> + 01 234 567 89</p>
                </mdb-col>
                <hr class="clearfix w-100 d-md-none" />
                <mdb-col 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"><mdb-icon fab icon="facebook" /></a>
                    <a type="button" class="btn-floating btn-small btn-tw"><mdb-icon fab icon="twitter" /></a>
                    <a type="button" class="btn-floating btn-small btn-gplus"><mdb-icon fab icon="google-plus" /></a>
                    <a type="button" class="btn-floating btn-small btn-dribbble"><mdb-icon fab icon="dribbble" /></a>
                  </div>
                </mdb-col>
                <hr class="clearfix w-100 d-md-none" />
              </mdb-row>
            </mdb-container>
            <div class="footer-copyright text-center py-3">
              <mdb-container fluid>
                &copy; 2020 Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>
              </mdb-container>
            </div>
          </mdb-footer>
          <!-- Footer -->
        </template>
        
        
    
        
            
        <script>
          import {
            mdbFooter,
            mdbContainer,
            mdbRow,
            mdbCol,
            mdbIcon
          } from 'mdbvue';
          export default {
            name: 'FooterPage',
            components: {
              mdbFooter,
              mdbContainer,
              mdbRow,
              mdbCol,
              mdbIcon
            }
          }
        </script>