title: Bootstrap 3 responsive with multiple break points
body: <p>I'm using latest Bootstrap 3.0 RC1 and trying to build an image overview with responsiveness and multiple break points when the images becomes too small (like seen on Dribbble).</p>
  
  <p>Issues:</p>
  
  <ol>
  <li>The image scaling only appears when there's two or less on an line (it should work with 3-4 images as well)</li>
  <li>My break lines OR the responsiveness cause different image sizes. I need to make sure that the max img size after breaks is the same as max size when there's 4 on a row. Example when breaking into two or one the images will initially appear much larger than the largest size with 4 in a row.</li>
  </ol>
  
  <p>I hope someone can help me out, I'm a beginner to building responsive stuff..</p>
  
  <p>Best regards</p>
  
  <p><strong>Link to jsfiddle:</strong></p>
  
  <p><a href="http://jsfiddle.net/6dckB/" rel="nofollow">http://jsfiddle.net/6dckB/</a> (your browser must be wide to see the effects)</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;ul class="row-fluid"&gt;
          &lt;li class="group"&gt;
              &lt;div class="img-thumbnail"&gt;
                  &lt;a href="#"&gt;
                      &lt;img src="http://placehold.it/350x150" style="width:100%;"&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="group"&gt;
              &lt;div class="img-thumbnail"&gt;
                  &lt;a href="#"&gt;
                      &lt;img src="http://placehold.it/350x150" style="width:100%;"&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="group"&gt;
              &lt;div class="img-thumbnail"&gt;
                  &lt;a href="#"&gt;
                      &lt;img src="http://placehold.it/350x150" style="width:100%;"&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="group"&gt;
              &lt;div class="img-thumbnail"&gt;
                  &lt;a href="#"&gt;
                      &lt;img src="http://placehold.it/350x150" style="width:100%;"&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="group"&gt;
              &lt;div class="img-thumbnail"&gt;
                  &lt;a href="#"&gt;
                      &lt;img src="http://placehold.it/350x150" style="width:100%;"&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="group"&gt;
              &lt;div class="img-thumbnail"&gt;
                  &lt;a href="#"&gt;
                      &lt;img src="http://placehold.it/350x150" style="width:100%;"&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="group"&gt;
              &lt;div class="img-thumbnail"&gt;
                  &lt;a href="#"&gt;
                      &lt;img src="http://placehold.it/350x150" style="width:100%;"&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="group"&gt;
              &lt;div class="img-thumbnail"&gt;
                  &lt;a href="#"&gt;
                      &lt;img src="http://placehold.it/350x150" style="width:100%;"&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.row-fluid {
    padding-left: 0;
    list-style: none;
  }
  .row-fluid:before,
  .row-fluid:after {
    content: " ";
    /* 1 */
  
    display: table;
    /* 2 */
  
  }
  .row-fluid:after {
    clear: both;
  }
  .row-fluid:before,
  .row-fluid:after {
    content: " ";
    /* 1 */
  
    display: table;
    /* 2 */
  
  }
  .row-fluid:after {
    clear: both;
  }
  @media (min-width: 768px) {
    .row-fluid {
      margin-left: -10px;
      margin-right: -10px;
    }
  }
  .row-fluid .row {
    margin-left: -10px;
    margin-right: -10px;
  }
  .row-fluid .group {
    position: relative;
    min-height: 1px;
    padding-left: 10px;
    padding-right: 10px;
    float: left;
    width: 50%;
    margin-bottom: 20px;
  }
  @media (max-width: 400px) {
    .row-fluid .group {
      position: relative;
      min-height: 1px;
      padding-left: 10px;
      padding-right: 10px;
      float: left;
      width: 100%;
    }
  }
  @media (min-width: 768px) and (max-width: 991px) {
    .row-fluid .group {
      position: relative;
      min-height: 1px;
      padding-left: 10px;
      padding-right: 10px;
      float: left;
      width: 33.33333333333333%;
    }
  }
  @media (min-width: 992px) {
    .row-fluid .group {
      position: relative;
      min-height: 1px;
      padding-left: 10px;
      padding-right: 10px;
      float: left;
      width: 25%;
    }
  }
  </code></pre>