<tutorialjinni.com/>

Sticky Footer Bootstrap Example

Posted Under: Bootstrap, Snippets, Template on Mar 24, 2020
A "sticky footer" is a footer that is "stick" to bottom on the web browser. It is looks good when there is little content on the page. But if there is more content is should push down and not hide the content.Sticking footer at the bottom of the page using Bootstrap is simple. Live Sticky footer using Flex

Live Preview of the following example. 
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>Bootstrap Flexbox Sticky Footer Example</title>
        <!-- Bootstrap core CSS -->
        <link rel="stylesheet" href="https://cdn.tutorialjinni.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <!-- Bootstrap core JavaScript -->
        <script src="https://cdn.tutorialjinni.com/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
        <script src="https://cdn.tutorialjinni.com/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js" type="text/javascript"></script>
        <!-- Custom styles for this template -->
        <style>
            html,
            body {
                height: 100%;
            }
            #page-content {
                flex: 1 0 auto;
            }
            #sticky-footer {
                flex-shrink: none;
            }
            /* Other Classes for Page Styling */
            body {
                background: #007bff;
                background: linear-gradient(to right, #00e691, #338eff);
            }
        </style>
    </head>
    <body class="d-flex flex-column">
        <div id="page-content">
            <div class="container text-center">
                <div class="row justify-content-center">
                    <div class="col-md-7">
                        <h1 class="font-weight-light mt-4 text-white">Bootstrap Sticky Footer using Flexbox</h1>
                        <p class="lead text-white-50">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    </div>
                </div>
            </div>
        </div>
        <footer id="sticky-footer" class="py-4 bg-dark text-white-50">
            <div class="container text-center">
                <small>Copyright © Your Website</small>
            </div>
        </footer>
    </body>
</html>


imgae