Main content area.
BREAKDOWN:Page ugly by design, functionality first - borders turned on to reveal div boundaries; layout is key. Divs that go the full width of the page are using divs with class="container-fluid"; the divs that only span the middle of the page and consequently leave a border on each side use class="container". Achieving a header and footer that span the entire page, while a body content that only spans the center of the page, is easy.... div inside of a div. You'll use this A LOT.

HEADER:
The big X above is a logo placeholder, and the buttons on the right represent nav buttons. Every div, where possible, has a border turned on to display how the layout is working.

<div class="container-fluid">
<nav class="container nav-container-bootstrap">
<div class="col-md-2 pull-left" style="border: thin solid silver;">
<img src="/default/includes/themes/NewMura/images/bootstrap-logoPlaceholder.png"><br>logo placeholder
</div>
<div class="col-md-10 pull-right" style="padding-top: 30px; border: thin solid silver;">nav buttons, pull right class
<button class="btn btn-default pull-right">Link 5</button>
<button class="btn btn-default pull-right">Link 4</button>
<button class="btn btn-default pull-right">Link 3</button>
<button class="btn btn-default pull-right">Link 2</button>
<button class="btn btn-default pull-right">Link 1</button>
</div>
</nav>
</div>
<div class="container" style=" background-color: white; border: thin solid silver;">
Main content area.<br>
BREAKDOWN:<br>
divs that go the full width of the page are using divs with class="container-fluid"; the divs that only span the middle of the page and consequently leave a border on each side use class="container". Achieving a header and footer that span the entire page, while a body content that only spans the center of the page, is easy.... div inside of a div. You'll use this A LOT.<br><br>
HEADER:<br>
The big X above is a logo placeholder, and the buttons on the right represent nav buttons. Every div, where possible, has a border turned on to display how the layout is working.
</div>
<div class="container-fluid">
<div class="container nav-container-bootstrap" style="border: thin solid silver;">
This is a footer that displays only in the center of the layout (using DIV class="container" (not class="container-fluid"))
</div>
</div>

This is a footer that displays only in the center of the layout (using DIV class="container" (not class="container-fluid"))