Material Design Bootstrap

Basic Footer


    <footer class="page-footer blue center-on-small-only">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6">
                        <h5 class="white-text">Footer Content</h5>
                        <p class="grey-text text-lighten-4">Here you can use rows and columns here to organize your footer content.</p>
                    </div>
                    <div class="col-md-6">
                        <h5 class="white-text">Links</h5>
                        <ul>
                            <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
                            <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
                            <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
                            <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="footer-copyright text-center rgba-black-light">
                <div class="container-fluid">
                    © 2015 Copyright: <a href="https://mdbootstrap.com"> MDBootstrap.com </a>
                </div>
            </div>
        </footer>

Advanced Footer


    <!--Footer section-->
        <footer class="page-footer elegant-color center-on-small-only">
            <div class="container-fluid">
                <div class="row">

                    <!--First column-->
                    <div class="col-md-3 col-xs-offset-1">
                        <p class="column-title white-text">About Material Design</p>
                        <div class="column-content">
                            <p class="thin-100 white-text">Material Design (codenamed Quantum Paper) is a design language developed by Google.
                                <br>
                                <br> Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p>
                        </div>
                    </div>
                    <!--/.First column-->

                    <!--Second column-->
                    <div class="col-md-2 col-md-offset-1">
                        <p class="column-title white-text">USEFUL LINKS</p>

                        <ul>
                            <li><a href="#">Contact us</a></li>
                            <li><a href="#">About MDB</a></li>
                            <li><a href="#">Suport</a></li>
                            <li><a href="#">Bug Report</a></li>
                            <li><a href="#">License</a></li>
                        </ul>

                    </div>
                    <!--/.Second column-->

                    <!--Third column-->
                    <div class="col-md-2">
                        <p class="column-title white-text">MDB Free Popular</p>

                        <ul>
                            <li><a href="#">Animations</a></li>
                            <li><a href="#">Forms</a></li>
                            <li><a href="#">Carousel</a></li>
                            <li><a href="#">Buttons</a></li>
                            <li><a href="#">Parallax</a></li>
                        </ul>
                    </div>
                    <!--/.Third column-->

                    <!--Fourth column-->
                    <div class="col-md-2">
                        <p class="column-title white-text">MDB Pro Popular</p>

                        <ul>
                            <li><a href="#">E-commerce</a></li>
                            <li><a href="#">Cards</a></li>
                            <li><a href="#">SideNav</a></li>
                            <li><a href="#">MaterialBox</a></li>
                            <li><a href="#">Social Buttons</a></li>
                        </ul>
                    </div>
                    <!--/.Fourth column-->

                </div>
            </div>
            <div class="call-to-action inline-block">
                <ul class="list-inline">
                    <li>
                        <h5 class="white-text">Register for free </h5></li>
                    <li> <a class="btn btn-danger waves-effect waves-light">GET STARTED!</a></li>
                </ul>
            </div>

            <div class="social-section text-center">
                <a class="btn-sm-full fb-bg rectangle waves-effect waves-light"><i class="fa fa-facebook"> </i> <span>Facebook</span> </a>
                <a class="btn-sm-full tw-bg rectangle waves-effect waves-light"><i class="fa fa-twitter"> </i> <span>Twitter</span></a>
                <a class="btn-sm-full gplus-bg rectangle waves-effect waves-light"><i class="fa fa-google-plus"> </i> <span>Google +</span></a>
                <a class="btn-sm-full comm-bg rectangle waves-effect waves-light"><i class="fa fa-comments"> </i> <span>Forum</span></a>
            </div>


            <div class="footer-copyright text-center rgba-black-light">
                <div class="container-fluid">
                    © 2015 Copyright: <a href="https://mdbootstrap.com"> MDBootstrap.com </a>
                </div>
            </div>

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

Basic Footer

Advanced Footer Premium component

Advanced Footer