Bootstrap 3 - Column Layout

Bootstrap 3 - Page Layout featuring columns, a sidebar navigation and main content section, inside a top navbar and footer.

by Doug Hill

HTML

<header id="container-navbar" class="">top-navbar</header>
<div id="wrapper-page" class="container">
    <div id="container-page-row" class="row">
        <div id="container-sidebar" class="col-lg-2 col-md-2 col-sm-3">container-sidebar</div>
        <div id="container-content" class="col-lg-10 col-md-10 col-sm-9">
            <article>
                <header class="">article header</header>
                <section class="">main content section</section>
            </article>
        </div>
    </div>
</div>
<footer id="wrapper-footer" class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <p id="footer-text" class=""><span class="">footer</span>
            </p>
        </div>
    </div>
</footer>

CSS

html,
body {
    height:         100%;
}

body {
    margin:         0 auto -40px;
}

#wrapper-page {
    height:         100%;
    display:        table;
    width:          100%;
    margin-top:     -40px;
    margin-bottom:  -40px;
    padding:        40px 0 0 0;
   -moz-box-sizing: border-box;
    box-sizing:     border-box;
}

#container-navbar {
    background:     #b2b2b2;
    height:         40px;
    padding:        0;
}

#container-page-row {
    height:         100%;
    display:        table-row;
}

#container-sidebar {
    display:        table-cell;
    background:     #d9d9d9;
    float:          none;
    padding:        0;
}

#container-content {
    display:        table-cell;
    background:     #bfbfbf;
    float:          none;
    padding:        0;
}

#wrapper-footer {
    height:         40px;
    background:     #666;
    display:        block;
    position:       relative;
    width:          100%;
}
    
#wrapper-footer p {
    text-align:     center;
}