Bootstrap – Fill fluid container between header and footer

Bootstrap 4 (update 2019)

Now it’s easier to get this layout using flexbox.

<body class="d-flex flex-column">
    <main class="container-fluid flex-fill">

body {

.flex-fill {
   flex:1 1 auto;


Note: The flex-fill utility class will be included in the next Bootstrap 4.1 release. So after that release the extra CSS for flex-fill won’t be needed.

Bootstrap 2 (original 2013 answer)

Any parent containers also have to be 100% height (html,body and #wrapper). If you make #wrapper {height:100%} and add ‘fill-height’ to your container it should work. See here:

#wrapper {
    min-height: 100% !important;
    height: 100% !important;
    margin: 0 auto -33px;

Leave a Comment