Build with Bootstrap

Download Bootstrap

You can download bootstrap free of charge, and you can also create a custom download before hand so that you can select which elements you want to use on your website and which ones you want to skip over. Bootstrap is based off of 12-column grid layout. Each element is labeled with a class called "spanXX" where "XX" stands for a number from 1 to 12. What that gives you is a column of a width that matches the width of XX number of one-twelfth of the width of the page.

For instance, the animated image on the right is using a 6 column grid, as you see all elements are either centered, or they fall into the grid layout. Logo and image scrollbar are centered. Navigation is using grids 2, 3, 4 and 5, while product gallery is using grids 1 and 2 for the first column, 3 and 4 for second and 5 and 6 for last.

Let me explain bootstrap classes with an example

Since I already have this image up on the page, let's pretend that we want to duplicate that layout. If you wanted to use a bootstrap 12 grid to build the above example you can do so, even though it is built on 6 grid. Simply double the grid spaces.

So let's take a look at all elements:

• 1. logo
• 2. navigation
• 3. image scroller
• 4. product gallery

Important

What I haven't commented on in the code is that you should use the class "row" on any of the full width elements, or if you want to indicate a jump to the new row. For instance, if you wanted to add a body of text under product gallery, you could add an "article" tag, which has class "row" applied to it, and then within the article tag you can add other grid related elements. What that class does is adds the left offset to counter balance the left margin applied by all span classes, so that everything is positioned properly.

Other Notes

The code should clearly demonstrate the basic use of 12 grid layout. There's more to it though. For instance, if you were to add a right sidebar across the entire website, you would want to create a global section or a div with class row, then the aside tag with class of, lets say, "span3", which allows the body section to have class "span9". Then you can continue by creating additional rows within that body section itself.

Also, if you need blank spaces on either sides, you can do what I did for the navigation in the example. You can see two divs with the class "span2" - one at the beginning and one at the end. What that does is creates empty section of the same width on either side. I believe this is self explanatory, but just wanted to point it out nonetheless.

Helpful Downloads

Bootstrap Grid - 1170px
Bootstrap Grid - 940px
Bootstrap Grid - 724px

Other Grids - Full
Other Grids - Tablet
Other Grids - Mobile

Bootstrap GUI - External Link

<!-- one column header => 12 / 1 = 12 => span12 -->
<header class="span12"><img src="logo.png" alt="logo" /></header>

<!-- nav bar -->
<nav class="row">
    <!-- six equal width columns => 12 / 6 = 2 => span2 -->
    <div class="span2"></div>
    <div class="span2">Home</div>
    <div class="span2">About</div>
    <div class="span2">Services</div>
    <div class="span2">Contact</div>
    <div class="span2"></div>   
</nav>

<!-- image scroller -->
<aside class="row">scroller code here</span>

<!-- article tag that holds all product galleries -->
<article class="row">

    <!-- three equal width columns per row => 12 / 3 = 4 => span4 -->
    <section class="span4">
        <h2>title</h2>
        <p>body</p>
    </section>

    <!-- three equal width columns per row => 12 / 3 = 4 => span4 -->
    <section class="span4">
        <h2>title</h2>
        <p>body</p>
    </section>

    <!-- three equal width columns per row => 12 / 3 = 4 => span4 -->
    <section class="span4">
        <h2>title</h2>
        <p>body</p>
    </section>

    <!-- three equal width columns per row => 12 / 3 = 4 => span4 -->
    <section class="span4">
        <h2>title</h2>
        <p>body</p>
    </section>

    <!-- three equal width columns per row => 12 / 3 = 4 => span4 -->
    <section class="span4">
        <h2>title</h2>
        <p>body</p>
    </section>

    <!-- three equal width columns per row => 12 / 3 = 4 => span4 -->
    <section class="span4">
        <h2>title</h2>
        <p>body</p>
    </section>

</article>