Layout Overview

Web pages should be well laid out to improve navigation for the user. Also for navigation purposes, the sites navigation should remain consistent on different pages. Our demonstration is designed to show off as many concepts as possible. It was not designed to provide an ideal navigation experience. When constructing a real world sites for end users it is always important to keep navigation consistent.

Consider if responsive design is important to you. Responsive design allows for your CSS through media queries to product unique layouts tuned for specific screen sizes. Accounting for page width is vital for any design approach as it is the cornerstone in aligning objects on a website. The most popular non-responsive websites generally have a width close to 960 or 940 pixels. Most sites are also center-aligned to make objects look more aesthetically pleasing on larger screens.

Please view our examples showing a number of unique layout options.


Provides a common fixed-width (and optionally responsive) layout with only <div class="container"> required.

<body> <div class="container"> ... </div></body>


Create a fluid, two-column page with <div class="container-fluid">—great for applications and docs.

<div class="container-fluid"> <div class="row-fluid"> <div class="span2"> <!--Sidebar content--> </div> <div class="span10"> <!--Body content--> </div> </div></div>

   Email Print