From b6ba717b75d4a3985c8fe5997954e07d12d934fe Mon Sep 17 00:00:00 2001
From: Mark Otto <markotto@twitter.com>
Date: Tue, 25 Sep 2012 23:01:18 -0700
Subject: [PATCH] fix getting started examples

---
 docs/getting-started.html                     | 29 +++++++++----------
 docs/templates/pages/getting-started.mustache | 29 +++++++++----------
 2 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/docs/getting-started.html b/docs/getting-started.html
index 6abb56f082..0c13789955 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -238,52 +238,51 @@
             <h1>5. Examples</h1>
           </div>
           <p class="lead">Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.</p>
-          <ul class="thumbnails bootstrap-examples">
-            <li class="span3">
+          <div class="row bootstrap-examples">
+            <div class="span3">
               <a class="thumbnail" href="examples/hero.html">
                 <img src="assets/img/examples/bootstrap-example-hero.jpg" alt="">
               </a>
               <h4>Basic marketing site</h4>
               <p>Featuring a hero unit for a primary message and three supporting elements.</p>
-            </li>
-            <li class="span3">
+            </div>
+            <div class="span3">
               <a class="thumbnail" href="examples/fluid.html">
                 <img src="assets/img/examples/bootstrap-example-fluid.jpg" alt="">
               </a>
               <h4>Fluid layout</h4>
               <p>Uses our new responsive, fluid grid system to create a seamless liquid layout.</p>
-            </li>
-            <li class="span3">
+            </div>
+            <div class="span3">
               <a class="thumbnail" href="examples/starter-template.html">
                 <img src="assets/img/examples/bootstrap-example-starter.jpg" alt="">
               </a>
               <h4>Starter template</h4>
               <p>A barebones HTML document with all the Bootstrap CSS and JavaScript included.</p>
-            </li>
+            </div>
 
-            <li class="span3">
+            <div class="span3">
               <a class="thumbnail" href="examples/marketing-narrow.html">
                 <img src="assets/img/examples/bootstrap-example-marketing-narrow.png" alt="">
               </a>
               <h4>Narrow marketing</h4>
               <p>Slim, lightweight marketing template for small projects or teams.</p>
-            </li>
-            <li class="span3">
+            </div>
+            <div class="span3">
               <a class="thumbnail" href="examples/signin.html">
                 <img src="assets/img/examples/bootstrap-example-signin.png" alt="">
               </a>
               <h4>Sign in</h4>
               <p>Barebones sign in form with custom, larger form controls and a flexible layout.</p>
-            </li>
-            <li class="span3">
+            </div>
+            <div class="span3">
               <a class="thumbnail" href="examples/carousel.html">
                 <img src="assets/img/examples/bootstrap-example-carousel.png" alt="">
               </a>
               <h4>Carousel jumbotron</h4>
               <p>A more interactive riff on the basic marketing site featuring a prominent carousel.</p>
-            </li>
-
-          </ul>
+            </div>
+          </div>
         </section>
 
 
diff --git a/docs/templates/pages/getting-started.mustache b/docs/templates/pages/getting-started.mustache
index 7ea2bff2e4..bfc2e8a3ad 100644
--- a/docs/templates/pages/getting-started.mustache
+++ b/docs/templates/pages/getting-started.mustache
@@ -169,52 +169,51 @@
             <h1>{{_i}}5. Examples{{/i}}</h1>
           </div>
           <p class="lead">{{_i}}Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.{{/i}}</p>
-          <ul class="thumbnails bootstrap-examples">
-            <li class="span3">
+          <div class="row bootstrap-examples">
+            <div class="span3">
               <a class="thumbnail" href="examples/hero.html">
                 <img src="assets/img/examples/bootstrap-example-hero.jpg" alt="">
               </a>
               <h4>{{_i}}Basic marketing site{{/i}}</h4>
               <p>{{_i}}Featuring a hero unit for a primary message and three supporting elements.{{/i}}</p>
-            </li>
-            <li class="span3">
+            </div>
+            <div class="span3">
               <a class="thumbnail" href="examples/fluid.html">
                 <img src="assets/img/examples/bootstrap-example-fluid.jpg" alt="">
               </a>
               <h4>{{_i}}Fluid layout{{/i}}</h4>
               <p>{{_i}}Uses our new responsive, fluid grid system to create a seamless liquid layout.{{/i}}</p>
-            </li>
-            <li class="span3">
+            </div>
+            <div class="span3">
               <a class="thumbnail" href="examples/starter-template.html">
                 <img src="assets/img/examples/bootstrap-example-starter.jpg" alt="">
               </a>
               <h4>{{_i}}Starter template{{/i}}</h4>
               <p>{{_i}}A barebones HTML document with all the Bootstrap CSS and JavaScript included.{{/i}}</p>
-            </li>
+            </div>
 
-            <li class="span3">
+            <div class="span3">
               <a class="thumbnail" href="examples/marketing-narrow.html">
                 <img src="assets/img/examples/bootstrap-example-marketing-narrow.png" alt="">
               </a>
               <h4>{{_i}}Narrow marketing{{/i}}</h4>
               <p>{{_i}}Slim, lightweight marketing template for small projects or teams.{{/i}}</p>
-            </li>
-            <li class="span3">
+            </div>
+            <div class="span3">
               <a class="thumbnail" href="examples/signin.html">
                 <img src="assets/img/examples/bootstrap-example-signin.png" alt="">
               </a>
               <h4>{{_i}}Sign in{{/i}}</h4>
               <p>{{_i}}Barebones sign in form with custom, larger form controls and a flexible layout.{{/i}}</p>
-            </li>
-            <li class="span3">
+            </div>
+            <div class="span3">
               <a class="thumbnail" href="examples/carousel.html">
                 <img src="assets/img/examples/bootstrap-example-carousel.png" alt="">
               </a>
               <h4>{{_i}}Carousel jumbotron{{/i}}</h4>
               <p>{{_i}}A more interactive riff on the basic marketing site featuring a prominent carousel.{{/i}}</p>
-            </li>
-
-          </ul>
+            </div>
+          </div>
         </section>