Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body class="hm-gradient">
    
    <main>
        
        <!--MDB Footers-->
        <div class="container mt-4">

            <div class="text-center darken-grey-text mb-4">
                <h1 class="font-bold mt-4 mb-3 h5">Built with Material Design for Bootstrap 4</h1>
                <a class="btn btn-danger btn-md" href="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">Free download<i class="fa fa-download pl-2"></i></a>
            </div>

            <!-- Grid row -->
            <div class="row">
            
                <!-- Grid column -->
                <div class="col-md-12 mb-4">
            
                    <!--Footer-->
                    <footer class="page-footer blue text-center text-md-left mt-0">

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

                                <!--First column-->
                                <div class="col-md-6">
                                    <h5 class="title mb-3">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 mb-3">Links</h5>
                                    <ul>
                                        <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">
                            <div class="container-fluid">
                                © 2015 Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>

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

                    </footer>
                    <!--/.Footer-->
            
                </div>
                <!-- Grid column -->
            
            </div>
            <!-- Grid row -->

            <!-- Grid row -->
            <div class="row">
            
                <!-- Grid column -->
                <div class="col-md-12 mb-4">
                    
                    <!--Footer-->
                    <footer class="page-footer center-on-small-only stylish-color-dark">

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

                                <!--First column-->
                                <div class="col-md-4">
                                    <h5 class="title mb-4 mt-3 font-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>
                                </div>
                                <!--/.First column-->

                                <hr class="clearfix w-100 d-md-none">

                                <!--Second column-->
                                <div class="col-md-2 mx-auto">
                                    <h5 class="title mb-4 mt-3 font-bold">Links</h5>
                                    <ul>
                                        <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="clearfix w-100 d-md-none">

                                <!--Third column-->
                                <div class="col-md-2 mx-auto">
                                    <h5 class="title mb-4 mt-3 font-bold">Links</h5>
                                    <ul>
                                        <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="clearfix w-100 d-md-none">

                                <!--Fourth column-->
                                <div class="col-md-2 mx-auto">
                                    <h5 class="title mb-4 mt-3 font-bold ">Links</h5>
                                    <ul>
                                        <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">
                            <ul>
                                <li>
                                    <h5 class="mb-1">Register for free</h5>
                                </li>
                                <li><a href="" class="btn btn-danger btn-rounded">Sign up!</a></li>
                            </ul>
                        </div>
                        <!--/.Call to action-->

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

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

                    </footer>
                    <!--/.Footer-->
                                    
                </div>
                <!-- Grid column -->
            
            </div>
            <!-- Grid row -->

            <!-- Grid row -->
            <div class="row">
            
                <!-- Grid column -->
                <div class="col-md-12">
                    
                    <!--Footer-->
                    <footer class="page-footer deep-purple center-on-small-only pt-0">

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

                            <!--Grid row-->
                            <div class="row pt-5 mb-3 text-center d-flex justify-content-center">

                                <!--Grid column-->
                                <div class="col-md-2 mb-3">
                                    <h6 class="title font-bold"><a href="#!">About us</a></h6>
                                </div>
                                <!--Grid column-->

                                <!--Grid column-->
                                <div class="col-md-2 mb-3">
                                    <h6 class="title font-bold"><a href="#!">Products</a></h6>
                                </div>
                                <!--Grid column-->

                                <!--Grid column-->
                                <div class="col-md-2 mb-3">
                                    <h6 class="title font-bold"><a href="#!">Awards</a></h6>
                                </div>
                                <!--Grid column-->

                                <!--Grid column-->
                                <div class="col-md-2 mb-3">
                                    <h6 class="title font-bold"><a href="#!">Help</a></h6>
                                </div>
                                <!--Grid column-->

                                <!--Grid column-->
                                <div class="col-md-2 mb-3">
                                    <h6 class="title font-bold"><a href="#!">Contact</a></h6>
                                </div>
                                <!--Grid column-->

                            </div>
                            <!--Grid row-->

                            <hr class="rgba-white-light" style="margin: 0 15%;">

                            <!--Grid row-->
                            <div class="row d-flex text-center justify-content-center mb-md-0 mb-4">

                                <!--Grid column-->
                                <div class="col-md-8 col-12 mt-5">
                                    <p style="line-height: 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>

                                </div>
                                <!--Grid column-->

                            </div>
                            <!--Grid row-->

                            <hr class="clearfix d-md-none rgba-white-light" style="margin: 10% 15% 5%;">

                            <!--Grid row-->
                            <div class="row pb-3">

                                <!--Grid column-->
                                <div class="col-md-12">

                                    <div class="footer-socials mb-5 flex-center">
                                        <!--Facebook-->
                                        <a class="icons-sm fb-ic"><i class="fa fa-facebook fa-lg white-text mr-md-4"> </i></a>
                                        <!--Twitter-->
                                        <a class="icons-sm tw-ic"><i class="fa fa-twitter fa-lg white-text mx-md-4"> </i></a>
                                        <!--Google +-->
                                        <a class="icons-sm gplus-ic"><i class="fa fa-google-plus fa-lg white-text mx-md-4"> </i></a>
                                        <!--Linkedin-->
                                        <a class="icons-sm li-ic"><i class="fa fa-linkedin fa-lg white-text mx-md-4"> </i></a>
                                        <!--Instagram-->
                                        <a class="icons-sm ins-ic"><i class="fa fa-instagram fa-lg white-text mx-md-4"> </i></a>
                                        <!--Pinterest-->
                                        <a class="icons-sm pin-ic"><i class="fa fa-pinterest fa-lg white-text ml-md-4"> </i></a>
                                    </div>
                                </div>
                                <!--Grid column-->
                            </div>
                            <!--Grid row-->

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

                        <!--Copyright-->
                        <div class="footer-copyright">
                            <div class="container-fluid">
                                © 2016 Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>
                            </div>
                        </div>
                        <!--/Copyright-->

                    </footer>
                    <!--/Footer-->
                                    
                </div>
                <!-- Grid column -->
            
            </div>
            <!-- Grid row -->
          
            <hr class="my-4">
          
            <div class="text-center darken-grey-text mb-4">
                <h3 class="font-bold mb-3">Here you can find more Footers:</h3>
                <a class="btn btn-danger" href="https://mdbootstrap.com/components/bootstrap-footer/" target="_blank">Bootstrap footers</a>
            </div>

        </div>
        <!--MDB Footers-->
      
    </main>
  
</body>
              
            
!

CSS

              
                .hm-gradient {
    background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
}
.darken-grey-text {
    color: #2E2E2E;
}
              
            
!

JS

              
                
              
            
!
999px

Console