Sticky Footer Template for Bootstrap

Sticky footer is a fixed-height footer to the bottom of the viewport in desktop browsers. The purpose of a sticky footer is that it "sticks" to the bottom of the browser window. But not always, if there is enough content on the page to push the footer lower, it still does that. But if the content on the page is short, a sticky footer will still hang to the bottom of the browser window.

Sample code and demo is here

<!DOCTYPE html><html>    <head>        <title>Tryit Editor - tools.bitcompiler.com</title>        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>        <style>            html              {                 position: relative;                 min-height: 100%;             }             body             {                 margin-bottom: 60px;             }             .footer             {                 position: absolute;                 bottom: 0;                 width: 100%;                 height: 60px;                 background-color: #f5f5f5;                 padding:17px 0px 17px 0px;             }         </style>    </head>    <body>        <nav class="navbar navbar-default navbar-fixed-top">            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">                        <span class="sr-only">Toggle navigation</span>                        <span class="icon-bar"></span>                        <span class="icon-bar"></span>                        <span class="icon-bar"></span>                    </button>                    <a class="navbar-brand" href="">Project name</a>                </div>
<div id="navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
<li class="active"><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</div>
</nav><br>        <div class="container">
            <div class="page-header">
                <h1>
Sticky Footer Template for Bootstrap</h1>
</div>
</div>
<footer class="footer">            <div class="container">
                <p class="text-muted">
Place sticky footer content here.</p>
</div>
</footer>    </body></html>

Demo

Sticky Footer Template for Bootstrap

No comments:

Post a Comment

Popular Posts

Tags

Contact Form