CFSNAP Bootstrap

Return to CFSNAP.com

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>