Bootstrap Snippet Footer test using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="css/bootstrap-responsive.css" rel="stylesheet">
    
<div class="wrapper">
  <div class="container">
    <header class="hero-unit">
      <h1>Twitter’s Bootstrap with Ryan Fait’s Sticky Footer and Aalaap Ghag’s Responsive Padding Fix</h1>
      <p>It's really <strong>not</strong> that hard, y’know. Check out the source code and <abbr title="Cascading Style Sheets">CSS</abbr> of this web page for how to do it yourself.</p>
    </header>
  </div>
  <div class="push"><!--//--></div>
</div> <!-- .wrapper -->
<footer>
  <div class="container">
    <p>Put together in less than five minutes by <a href="http://www.martinbean.co.uk/" rel="author">Martin Bean</a>. Uses <a href="http://twitter.github.com/bootstrap/" rel="external">Twitter Bootstrap</a> and <a href="http://ryanfait.com/sticky-footer/" rel="external">Ryan Fait’s Sticky Footer</a> and <a href="#">Aalaap Ghag’s Responsive Padding Fix</a>.</p>
  </div>
</footer>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 html, body {
            height: 100%;
        }
        footer {
            color: #666;
            background: #222;
            padding: 17px 0 18px 0;
            border-top: 1px solid #000;    
        }
        footer a {
            color: #999;
        }
        footer a:hover {
            color: #efefef;
        }
        .wrapper {
            min-height: 100%;
            height: auto !important;
            height: 100%;
            margin: 0 auto -63px;
        }
        .push {
            height: 63px;
        }
        /* not required for sticky footer; just pushes hero down a bit */
        .wrapper > .container {
            padding-top: 60px;
        }
        /* responsive footer fix by Aalaap Ghag */
        @media (max-width: 767px) {
            body {
                padding-right: 0px;
                padding-left: 0px;
            }
    
            footer, .wrapper {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Footer test"
Bootstrap 3.3.0 Snippet by chrissarti

Related: See More

Questions / Comments:

"Footer test" Bootstrap 3.3.0 Snippet by chrissarti

Related: See More

Questions / Comments:

"Footer test"
Bootstrap 3.3.0 Snippet by chrissarti