Bootstrap 3 and Flex

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

by Shrikrishna Gupta

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container flex-container">
    <div class="row header">
        <div class="col-xs-12">
            <p>header content</p>
        </div>
    </div>
    <div class="row main">
        <div class="col-xs-12">
            <p>main content</p>
        </div>
    </div>
    <div class="row footer">
        <div class="col-xs-12">
            <p>footer content</p>
        </div>
    </div>
</div>

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
 @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
html {
    border: 2px solid pink;
    height: 100%;
}
body {
    border: 2px solid blue;
    height: 100%;
}
.flex-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 3px solid purple;
}
.header {
    background-color: red;
}
.main {
    background-color: green;
    flex: 3;
}
.footer {
    background-color: yellow;
}

JavaScript

/* Latest compiled and minified JavaScript included as External Resource */