title: Float not working with Twitter-Bootstrap
body: <p>I looked for answers but every time I tried to employ the answers I still wasn't getting the desired result. I'm using bootstrap thumbnail elements and trying to get them to float left of each other as they have on the bootstrap website. Tried stuffing them in to separate divs. tried stuff them all into a single div. Nothing's working. Any ideas? Any input would be appreciated.</p>
  
  <p>Here's a link to the code: <a href="http://jsbin.com/paregopuni/1/edit?html,css,output" rel="nofollow">http://jsbin.com/paregopuni/1/edit?html,css,output</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#announcements {
      width: 70%;
      margin-left: auto;
      margin-right: auto;
      margin-top: 3em;
  }
  
  .jumbotron p {
      margin: 1em;
  }
  
  .jumbotron h1 {
      margin: 0.5em;
  }
  
  
  .floatleft {
      float:  left;
  }
  
  .clear {
    clear: both;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;meta name="description" content="portfolio site"&gt;
  
          &lt;!-- Latest compiled and minified CSS --&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"&gt;
          &lt;link rel="stylesheet" href="main.css"&gt;
  
          &lt;!--[if lt IE 9]&gt;&lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;
  
          &lt;title&gt;Sample&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="wrapper"&gt;
  
              
              &lt;div id="announcements"&gt;
              &lt;div class="jumbotron"&gt;
                  &lt;h1&gt;Announcements&lt;/h1&gt;
                  &lt;p&gt;...&lt;/p&gt;
                  &lt;p&gt;&lt;a class="btn btn-primary btn-lg" href="#" role="button"&gt;Learn more&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
  
                  &lt;div class="floatleft"&gt;
                      &lt;div class="row"&gt;
                      &lt;div class="col-sm-6 col-md-4"&gt;
                      &lt;div class="thumbnail"&gt;
                          &lt;img src="..." alt="..."&gt;
                          &lt;div class="caption"&gt;
                              &lt;h3&gt;Thumbnail label&lt;/h3&gt;
                              &lt;p&gt;Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.&lt;/p&gt;
                              &lt;p&gt;&lt;a href="#" class="btn btn-primary" role="button"&gt;Button&lt;/a&gt; &lt;a href="#" class="btn btn-default" role="button"&gt;Button&lt;/a&gt;&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
                  &lt;/div&gt;
  
  
                
                
                  &lt;div class="floatleft"&gt;
                      &lt;div class="row"&gt;
                      &lt;div class="col-sm-6 col-md-4"&gt;
                      &lt;div class="thumbnail"&gt;
                          &lt;img src="..." alt="..."&gt;
                          &lt;div class="caption"&gt;
                              &lt;h3&gt;Thumbnail label&lt;/h3&gt;
                              &lt;p&gt;Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.&lt;/p&gt;
                              &lt;p&gt;&lt;a href="#" class="btn btn-primary" role="button"&gt;Button&lt;/a&gt; &lt;a href="#" class="btn btn-default" role="button"&gt;Button&lt;/a&gt;&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>