Bootstrap Snippet Footer at bottom using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<header>HEADER</header>
<article>
    <br>
  <input type='checkbox' id='c' />
  <label for='c'>Toggle Content Height</label>
</article>
<footer>FOOTER</footer>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
html{ height:100%; }
body{ min-height:100%; padding:0; margin:0; position:relative; }
body::after{ content:''; display:block; height:100px; }
footer{ 
  position:absolute; 
  bottom:0; 
  width:100%; 
  height:100px; 
}
/* FOR DEMO ONLY */
body{ font:bold 1.2em/2.5 arial; text-align:center; }
label{ cursor:pointer; display:inline-block; transition:1s ease; }
:checked ~ label{ margin-bottom:1400px; }
article{ width:40%; margin:0 auto; color:#444; }
header{ background:#D51B52; height:50px; color: #fff; }
footer{ background:#000; color:#fff; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Footer at bottom"
Bootstrap 4.1.1 Snippet by mdwaris198

Related: See More

Questions / Comments:

"Footer at bottom" Bootstrap 4.1.1 Snippet by mdwaris198

Related: See More

Questions / Comments:

"Footer at bottom"
Bootstrap 4.1.1 Snippet by mdwaris198