Databases
StackOverflow2013
Postsdbo
POImages "pushing" others away
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POImages "pushing" others away
    text
    copied!<p>Basically I want to list my images on my Bootstrap page, giving column spans per image.</p> <p>Right now it looks the following:</p> <p><img src="https://i.stack.imgur.com/bcLyN.png" alt="enter image description here"></p> <p>However if one of the images is slightly larger than the others it'll push them off ruining the view as shown below (the first image with Harry Potter is the one being too big):</p> <p><img src="https://i.stack.imgur.com/kLkTq.png" alt="enter image description here"></p> <p>How can I make it so bootstrap always will display each image with the same size regardless of the images original size and not shove others away as above?</p> <p>Here's the HTML displaying the images:</p> <pre><code>&lt;div class="row"&gt; &lt;div class="col-lg-2 col-md-2 col-sm-2"&gt; &lt;a class="thumbnail" href="/movies/watch/Harry Potter and the Deathly Hallows: Part 2_2011"&gt;&lt;img src="/Images/Movies/Harry Potter and the Deathly Hallows Part 2_2011.jpg" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="col-lg-2 col-md-2 col-sm-2"&gt; &lt;a class="thumbnail" href="/movies/watch/Transformers: Dark of the Moon_2011"&gt;&lt;img src="/Images/Movies/Transformers Dark of the Moon_2011.jpg" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="col-lg-2 col-md-2 col-sm-2"&gt; &lt;a class="thumbnail" href="/movies/watch/The Twilight Saga: Breaking Dawn - Part 1_2011"&gt;&lt;img src="/Images/Movies/The Twilight Saga Breaking Dawn - Part 1_2011.jpg" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="col-lg-2 col-md-2 col-sm-2"&gt; &lt;a class="thumbnail" href="/movies/watch/The Hangover Part II_2011"&gt;&lt;img src="/Images/Movies/The Hangover Part II_2011.jpg" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="col-lg-2 col-md-2 col-sm-2"&gt; &lt;a class="thumbnail" href="/movies/watch/Pirates of the Caribbean: On Stranger Tides_2011"&gt;&lt;img src="/Images/Movies/Pirates of the Caribbean On Stranger Tides_2011.jpg" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="col-lg-2 col-md-2 col-sm-2"&gt; &lt;a class="thumbnail" href="/movies/watch/Fast Five_2011"&gt;&lt;img src="/Images/Movies/Fast Five_2011.jpg" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="col-lg-2 col-md-2 col-sm-2"&gt; &lt;a class="thumbnail" href="/movies/watch/Mission: Impossible - Ghost Protocol_2011"&gt;&lt;img src="/Images/Movies/Mission Impossible - Ghost Protocol_2011.jpg" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="col-lg-2 col-md-2 col-sm-2"&gt; &lt;a class="thumbnail" href="/movies/watch/Cars 2_2011"&gt;&lt;img src="/Images/Movies/Cars 2_2011.jpg" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="col-lg-2 col-md-2 col-sm-2"&gt; &lt;a class="thumbnail" href="/movies/watch/Sherlock Holmes: A Game of Shadows_2011"&gt;&lt;img src="/Images/Movies/Sherlock Holmes A Game of Shadows_2011.jpg" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="col-lg-2 col-md-2 col-sm-2"&gt; &lt;a class="thumbnail" href="/movies/watch/Thor_2011"&gt;&lt;img src="/Images/Movies/Thor_2011.jpg" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="col-lg-2 col-md-2 col-sm-2"&gt; &lt;a class="thumbnail" href="/movies/watch/Rise of the Planet of the Apes_2011"&gt;&lt;img src="/Images/Movies/Rise of the Planet of the Apes_2011.jpg" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="col-lg-2 col-md-2 col-sm-2"&gt; &lt;a class="thumbnail" href="/movies/watch/Captain America: The First Avenger_2011"&gt;&lt;img src="/Images/Movies/Captain America The First Avenger_2011.jpg" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload