Twitter Bootstrap. 3 Column with Header and Footer

Question

I am trying to work out how to make a very simple layout using Twitter bootstrap 3.

It is basically a sticky header (always at the top of the viewport), a footer that resides at the bottom of the content (not fixed to the bottom of the viewport) and then, between the two - 3 columns. The left and right ones are fixed width (200px) and the middle column is to be fluid dependant on the screen width.

I've tried way too many ways of doing this and I'm starting to lose the plot slightly. Could someone please help me out.

EDIT 1(5): My header footer layout code. I've tried too many different things to try and achieve the three columns. Edit for another attempt. Issue here is that a) the columns are fluid and b) the 12 column layout is to the left and doesn't occupy the whole width.

    <div class="container-full">      
        <div class="navbar navbar-static-top">  
            <div class="navbar-inner blue-bg">
                <a href="#" class="brand"><img src="images/kab/logo-header.png" alt="KAB Logo Large"/></a>
            </div>
        </div>  

        <div class="container-full">    
            <div class="row-fluid">

                <div class="span1">
                    <h4>Left Column</h4>
                </div>

                <div class="span10">
                    <h4>Center Content</h4>
                </div>

                <div class="span1">
                    <h4>Right Column</h4>
                </div>
            </div>

        </div>

        <div class="navbar navbar-fixed-bottom">
            <div class="navbar-inner blue-bg" style="height: 77px;"> </div>
        </div>
    </div>

EDIT 2: Added an awful attempt trying it with DIV's, but doesn't that defeat the object of using a framework?

EDIT 3: Structure of ideal layout

    +------------------------------------------------------+
    |                       Header                         |
    +------------+------------------------------+----------+
    |            |                              |          |
    |            |                              |          |
    |  Fixed     |       Fluid Column           |  Fixed   |
    |  200px     |                              |  200px   |
    |            |                              |          |
    |            |                              |          |
    |            |                              |          |
    |            |                              |          |
    |            |                              |          |
    +------------+------------------------------+----------+
    |                        Footer                        |
    +------------------------------------------------------+

EDIT 4: Here is a fiddle I found on here and have adapted it to suit however there is some whitespace on the right side. Also, is this the best practice when it comes to achieving this type of layout?

http://jsfiddle.net/FzVtx/123/

Answer 1

If anybody still using BS3, and wants to know how to get this design, this is the solution:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<style>
/* 
This for the 200px. 
Put as comments cause it's breaking the view to 3 nested divs on many small-screen divices.

.col-xs-2 {min-width: 200px;}
*/
</style>
<div class="container-fluid text-center">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">Header</div>
  </nav>
  <div class="row" style="margin-top: 50px;">  
    <div class="col-xs-2">
      <h4>Left Column</h4>
    </div>
    <div class="col-xs-8">
      <h4>Center Content</h4>
    </div>
    <div class="col-xs-2">
      <h4>Right Column</h4>
    </div>
  </div>
  <div class="col-12">
    <div class="container">Footer</div>
  </div>
</div>