Flush footer to the bottom (not fixed) in Bootstrap

If you create a page with little amount of content, your footer is going to be places just below that content and it will leave empty space below it. This makes your page look really ugly, especially if you have dark footer. Footer should always be at the bottom, even if a page doesn’t have any content.

Bootstrap, despite its awesomeness, doesn’t have a ready made solution for this issue, but the fix is not hard to implement. All that is necessary is to add some CSS code. This will make your footer drop to the bottom if there is not enough content and if there is, the footer will behave normally.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
html {
position: relative;
min-height: 100%;
}

body {
/* Margin bottom by footer height */
margin-bottom: 180px;
}

footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 180px;
background-color: #222;
border-color: #080808;
}

I found this solution at getbootstrap.com.

Read More