title: Irregular image gallery Bootstrap
body: <p>I started to use the bootstrap CSS framework. With experience in Html, Css, Jquery and some others, in my first projectw I have problems with irregular image gallery:</p>
  
  <p><a href="http://alkoholeregionalne.pl/wizu1.jpg" rel="nofollow">Here's template.</a></p>
  
  <p>I put code as follow, but that's not the best - in different screen it breaks down:</p>
  
  <pre><code>&lt;div class="row"&gt;
  &lt;div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-0 artw najprawy"&gt;
  &lt;h3&gt;abc/h3&gt; 
  &lt;div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 najprawy"&gt;
  &lt;img src="yellow.jpg" class="biel pull-right" /&gt;
  &lt;/div&gt;
  &lt;div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 najprawy "&gt;
  &lt;img src="orange.jpg" class="biel pull-right" style="margin-right:5px;" /&gt;
  &lt;/div&gt;
  &lt;div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 najprawy "&gt;
  &lt;img src="orange.jpg" class="biel pull-right" style="margin-right:5px;" /&gt;
  &lt;/div&gt;
  &lt;div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 najprawy"&gt;
  &lt;img src="orange.jpg" class="biel pull-right" /&gt;
  &lt;/div&gt;
  &lt;/div&gt;&lt;!-- col-6 --&gt;
  
  &lt;div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-0 artw  najprawy"&gt;
  &lt;div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 najprawy"&gt;
  &lt;img src="yellow.jpg" class="biel pull-right" /&gt;
  &lt;/div&gt;
  &lt;div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 najprawy"&gt;
  &lt;img src="orange.jpg" class="biel pull-right" /&gt;
  &lt;/div&gt;
  &lt;div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 najprawy"&gt;
  &lt;img src="orange.jpg" class="biel pull-right" /&gt;
  &lt;/div&gt;
  &lt;div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 najprawy"&gt;
  &lt;img src="orange.jpg" class="biel pull-right" alt="" style="margin-right:0px;" /&gt;
  &lt;/a&gt; 
  &lt;/div&gt;
  &lt;/div&gt;&lt;!-- col-6 --&gt;
  &lt;/div&gt;&lt;!-- row --&gt;
  </code></pre>
  
  <p>My own classes are:</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>.najprawy {padding-right:0px;margin-right:0px;}
  div.artw img.biel {margin-bottom:20px}
  img.biel {border:solid 1px #fff;}</code></pre>
  </div>
  </div>
  </p>
  
  <p>I suppose it's very simple solution, but I can't get it.
  The template <a href="http://startbootstrap.com/template-overviews/shop-homepage/" rel="nofollow">http://startbootstrap.com/template-overviews/shop-homepage/</a>
  doesn't work for me, althoug I'm using the same images properties (witdht, height). The problem is how to set the red, orange and yellow images in vertically the same line in sm-md-lg width, because for now I can't set yellow right image in line with right side of red one and orange boxes in line with yellow and red - they are moving with different screen.</p>