Border layout with bootstrap

Question

Is it possible to build a border layout with bootstrap, that centers the labels of the right and left borders, keeps the bottom at the bottom of the page and fills the content with all space left over in the center?

New to bootstrap, but even with the help of google I just came up with this:

div class="container">
<div class="row">
    <div class="col-xs-1">
        <div class="left-box">
            <div class="turn-left">left</div>
        </div>
    </div>
    <div class="col-xs-10">
        <div class="row">
            <div class="col-xs-12">
                <div class="top-box">top</div>
            </div>
            <div class="col-xs-12">
                <div class="content-box">content</div>
            </div>
            <div class="col-xs-12">
                <div class="bottom-box">bottom</div>
            </div>
        </div>
    </div>
    <div class="col-xs-1">
        <div class="right-box">
            <div class="turn-right">right</div>
        </div>
    </div>
</div>

https://jsfiddle.net/fbtw6/352

The result is not very convincing - what am I doing wrong?

Deja Vu · Accepted Answer · 2015-07-20T20:56:40.743

See it this works for you.

<div class="container">
    <div class="page-header">
        <div class="row">
            <div class="col-xs-1">
                <div class="left-box">
                    <div class="turn-left">left</div>
                </div>
            </div>
            <div class="col-xs-10">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="top-box">top</div>
                    </div>
                    <div class="col-xs-12">
                        <div class="content-box">content</div>
                    </div>
                </div>
            </div>
            <div class="col-xs-1">
                <div class="right-box">
                    <div class="turn-right">right</div>
                </div>
            </div>
        </div>
    </div>
</div>
<footer class="footer">
    <div class="container">
        <p>sticky footer</p>
    </div>
</footer>

I used this example to assemble.

Like this any better?

Partly, yes, thanks a lot - but how would I get the footer between the left and right panels? When I tried, it went up again. And there's still the vertical alignment of the labels in the left and right. — Chris, Jul 20 '15 at 01:38
Yes - Wow, great - exactly! Not Bootstrap cols, but that's fine, I'm going to work from there. — Chris, Jul 21 '15 at 00:48

Border layout with bootstrap

1 Answers1