CODEWITHSUNDEEP
htmltwitter-bootstrapcss
RonTheOld
RonTheOld

Reputation: 777

Getting rid of white space in image gallery

Hi guys im not sure if this is the correct term but im building an image gallery in bootstrap with the idea of using masonry, so basically , everything is in different sizes , my problem is i have a huge gap in between my gallreys and i was wondering how i can get rid of it. My problem looks like this : enter image description here

I would like it so that space in the red circle could go away and that , i could connect them together

HTML:

<div class="row">
  <div class="card-columns">
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x600" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x700" alt="Card image cap">
    </div>
  </div>
</div>
    <div class="row">
  <div class="card-columns">
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x600" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x700" alt="Card image cap">
    </div>
  </div>
</div>

Please let me know if there is an easier way of doing this, im using boostrap 3 or if im doing something stupid but i would like to build a gallery using this idea but just so i can get rid of those big spaces

Thanks

Upvotes: 0

Views: 111

Answers (1)

Md Monjur Ul Hasan
Md Monjur Ul Hasan

Reputation: 1791

You are trying to use multiple row, that makes it impossible to avoid that gaps. All you have to do is, there will be only one row in the entire page, but multiple column. Then there will be no gap. A pseudo code is as follows:

<div class=row>
    <div class="col-sm-2">

         images 
    </div>
    <div class="col-sm-2">

         images 
    </div>
    <div class="col-sm-2">

         images 
    </div>
    <div class="col-sm-2">

         images 
    </div>
    <div class="col-sm-2">

         images 
    </div>
 <div>

Upvotes: 3

Related Questions