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