Angular Bootstrap footer

Footer will help you to organize a lot of site navigation and information at the end of a page.

It can be a very useful overview of the most important links and content of the website.

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


Basic Footer

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

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

            <!--First column-->
            <div class="col-md-6">
                <h5 class="title">Footer Content</h5>
                <p>Here you can use rows and columns here to organize your footer content.</p>
            </div>
            <!--/.First column-->

            <!--Second column-->
            <div class="col-md-6">
                <h5 class="title">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>
            <!--/.Second column-->
        </div>
    </div>
    <!--/.Footer Links-->

    <!--Copyright-->
    <div class="footer-copyright text-center py-3">
        <div class="container-fluid">
            © 2017 Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>
        </div>
    </div>
    <!--/.Copyright-->
</footer>
<!--/.Footer-->

                  
              

Minimalistic Footer

                  
<footer class="footer-copyright blue py-3 text-center text-white">
  © 2018 Copyright:
  <a class="text-white" href="https://mdbootstrap.com/material-design-for-bootstrap/"> MDBootstrap.com </a>
</footer>
                  
              

Advanced Footer MDB Pro component

                      
<!--Footer-->
<footer class="page-footer mdb-color text-center text-md-left pt-4 mt-4">

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

            <!--First column-->
            <div class="col-md-3 offset-md-1">
                <h5 class="title">Footer Content </h5>
                <p>Here you can use rows and columns here to organize your footer content.</p>
            </div>
            <!--/.First column-->

            <hr class="hidden-md-up">

            <!--Second column-->
            <div class="col-md-2 offset-md-1">
                <h5 class="title">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>
            <!--/.Second column-->

            <hr class="hidden-md-up">

            <!--Third column-->
            <div class="col-md-2">
                <h5 class="title">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>
            <!--/.Third column-->

            <hr class="hidden-md-up">

            <!--Fourth column-->
            <div class="col-md-2">
                <h5 class="title">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>
            <!--/.Fourth column-->

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

    <hr>

    <!--Call to action-->
    <div class="call-to-action text-center py-3">
        <ul class="list-unstyled list-inline">
            <li class="list-inline-item">
                <h5>Register for free</h5>
            </li>
            <li class="list-inline-item">
                <a href="" class="btn btn-danger waves-light btn-rounded" mdbWavesEffect>Sign up!</a>
            </li>
        </ul>
    </div>
    <!--/.Call to action-->

    <hr>

    <!--Social buttons-->
    <div class="text-center mb-3">

        <a class="btn-floating btn-small btn-fb waves-light" mdbWavesEffect>
            <i class="fa fa-facebook"> </i>
        </a>
        <a class="btn-floating btn-small btn-tw waves-light" mdbWavesEffect>
            <i class="fa fa-twitter"> </i>
        </a>
        <a class="btn-floating btn-small btn-gplus waves-light" mdbWavesEffect>
            <i class="fa fa-google-plus"> </i>
        </a>
        <a class="btn-floating btn-small btn-li waves-light" mdbWavesEffect>
            <i class="fa fa-linkedin"> </i>
        </a>
        <a class="btn-floating btn-small btn-git waves-light" mdbWavesEffect>
            <i class="fa fa-github"> </i>
        </a>
        <a class="btn-floating btn-small btn-pin waves-light" mdbWavesEffect>
            <i class="fa fa-pinterest"> </i>
        </a>
        <a class="btn-floating btn-small btn-ins waves-light" mdbWavesEffect>
            <i class="fa fa-instagram"> </i>
        </a>

    </div>
    <!--/.Social buttons-->

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

        </div>
    </div>
    <!--/.Copyright-->

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

API Reference:

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.

API Reference for MDB Angular Footers:
// For MDB Angular Pro
import { WavesModule } from 'ng-uikit-pro-standard'
// For MDB Angular Free
import { WavesModule } from 'angular-bootstrap-md'