How to Space These Images Inside of a Bootstrap 3 Grid System

How do I space these images inside of a Bootstrap 3 grid system?

Remove your own CSS for .col-lg-4: these margins may screw up the Bootstrap CSS. Next to that, these columns are only visible when your screen width is bigger than 1200 px.

Add the following classes to your divs: .col-xs-4 .col-sm-4 and .col-md-4, and give images a class="img-responsive" attribute.

It should work now as you wish.

Bootstrap Image Grid with 3 Images

Here is an example of the grid system. You need to create a row to hold all of the sections. Then inside the row, create 2 columns, left and right. On the right column, create 2 rows.

So the structure should be like this:

- row
    - column
    - column
        - row
        - row

<html>
  <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col" style="padding:100px; background:red;">
          1
        </div>
        <div class="col">
          <div class="row" style="padding:100px; background:blue;">
            2
          </div>
          <div class="row" style="padding:100px; background:gray;">
            3
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

How to cover background images in Bootstrap 3 grids?

You can use block element with background image where height is set via padding-bottom with percentage value

.img {
    margin-right: -15px; // Remove right gap
    margin-left: -15px;  // Remove left gap
    padding-bottom: 62.5%; // ratio is 16:10
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

Example in Codepen

or with img elements (in this case your images should have the same dimensions)

Example in Codepen

Remove weird space between images in bootstrap

Please try below code, it will solve problem,

<div class="col-xs-12 col-md-2 col-md-offset-3"><img src="images/tw_edit.png"></div>
<div class="col-xs-12 col-md-2"><img src="images/tw_edit.png"></div>
<div class="col-xs-12 col-md-2"><img src="images/tw_edit.png"></div>

Bootstrap grid system formatting photos in Rails

Assuming you want rows of 4 columns, you could do something like this:

<% @products.in_groups_of(4, false).each do |group| %>
  <div class='row'>
    <% group.each do |product| %>
      <div class='col-md-3'>
        <%= image_tag(product.image_url, class: "img-responsive") %>
        <h3><%= product.title %></h3>
        <div><%= sanitize(product.description) %></div>
        <div><%= number_to_currency(product.price) %></div> 
        <%= button_to 'Add to Cart', line_items_path(product_id: product), class: 'btn btn-info btn-sm', remote: true %>
      </div>
    <% end %>
  </div>
<% end %>

This splits your data set up into groups of 4 items, then outputs a row div for each group. Then within each row, it outputs each member of the group in its own column div.

The false passed in to in_groups_of ensures that you don't try to output a column for a row where there are less than 4 items. This would happen on your last row if your total number of products was not exactly divisible by 4 since by default the function will pad out the array with nil.

Thanks to @vermin for the fill_with tip!

Bootstrap 3 grid breaking with responsive images of not the same height

So the way the technique works in my answers provided in the comments is that you use the nth-child to give the .clear class some css to provide the clearfix. The thing about nth-child is that it literally counts every child, so in your original fiddle you had an h2 element as the first child element in the row. Following the rest of the css rules, the media queries were not being applied because the .clear class was never found at the specified nth-child position.

Here's the fix:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css');

 .img-full {

  width: 100%;

}

@media (max-width: 991px) {

  .portfolio>.clear:nth-child(6n):before {

    content: '';

    display: table;

    clear: both;

  }

}

@media (min-width: 992px) {

  .portfolio>.clear:nth-child(12n):before {

    content: '';

    display: table;

    clear: both;

  }

}

<div class="container">

  <h2>Hello World!</h2>

  <div class="row portfolio">

    <div class="col-xs-4 col-md-2">

      <a href="#">

        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/deathnote.jpg" class="img-full" />

      </a>

    </div>

    <div class="clear"></div>

    <div class="col-xs-4 col-md-2">

      <a href="#">

        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/hunterxhunter2011.jpg" class="img-full" />

      </a>

    </div>

    <div class="clear"></div>

    <div class="col-xs-4 col-md-2">

      <a href="#">

        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/30for30badboys.jpg" class="img-full" />

      </a>

    </div>

    <div class="clear"></div>

    <div class="col-xs-4 col-md-2">

      <a href="#">

        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/theartofflight.jpg" class="img-full" />

      </a>

    </div>

    <div class="clear"></div>

    <div class="col-xs-4 col-md-2">

      <a href="#">

        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/fullmetalalchemistbrotherhood.jpg" class="img-full" />

      </a>

    </div>

    <div class="clear"></div>

    <div class="col-xs-4 col-md-2">

      <a href="#">

        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/aliveinsideastoryofmusicmemory.jpg" class="img-full" />

      </a>

    </div>

    <div class="clear"></div>

    <div class="col-xs-4 col-md-2">

      <a href="#">

        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/magithelabyrinthofmagic.jpg" class="img-full" />

      </a>

    </div>

    <div class="clear"></div>

    <div class="col-xs-4 col-md-2">

      <a href="#">

        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/rushbeyondthelightedstage.jpg" class="img-full" />

      </a>

    </div>

    <div class="clear"></div>

    <div class="col-xs-4 col-md-2">

      <a href="#">

        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/30for30surviveandadvance.jpg" class="img-full" />

      </a>

    </div>

    <div class="clear"></div>

    <div class="col-xs-4 col-md-2">

      <a href="#">

        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/thebestofmen.jpg" class="img-full" />

      </a>

    </div>

    <div class="clear"></div>

    <div class="col-xs-4 col-md-2">

      <a href="#">

        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/houseofcards.jpg" class="img-full" />

      </a>

    </div>

    <div class="clear"></div>

    <div class="col-xs-4 col-md-2">

      <a href="#">

        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/youngjustice.jpg" class="img-full" />

      </a>

    </div>

    <div class="clear"></div>

    <div class="col-xs-4 col-md-2">

      <a href="#">

        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/marvelsagentsofshield.jpg" class="img-full" />

      </a>

    </div>

    <div class="clear"></div>

    <div class="col-xs-4 col-md-2">

      <a href="#">

        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/broadchurch.jpg" class="img-full" />

      </a>

    </div>

    <div class="clear"></div>

    <div class="col-xs-4 col-md-2">

      <a href="#">

        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/historyoftheeagles.jpg" class="img-full" />

      </a>

    </div>

    <div class="clear"></div>

    <div class="col-xs-4 col-md-2">

      <a href="#">

        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/aliveinsideastoryofmusicmemory.jpg" class="img-full" />

      </a>

    </div>

    <div class="clear"></div>

    <div class="col-xs-4 col-md-2">

      <a href="#">

        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/youngjustice.jpg" class="img-full" />

      </a>

    </div>

    <div class="clear"></div>

    <div class="col-xs-4 col-md-2">

      <a href="#">

        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/hunterxhunter2011.jpg" class="img-full" />

      </a>

    </div>

    <div class="clear"></div>

    <div class="col-xs-4 col-md-2">

      <a href="#">

        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/theartofflight.jpg" class="img-full" />

      </a>

    </div>

    <div class="clear"></div>

    <div class="col-xs-4 col-md-2">

      <a href="#">

        <img src="https://s3.amazonaws.com/unogenie/raw/images/netflix/deathnote.jpg" class="img-full" />

      </a>

    </div>

    <div class="clear"></div>

  </div>

</div>

Responsive Full Width Image Grid with Bootstrap

I think the simplest way is to remove the gutter around the columns, then use the Bootstrap col-*-* to layout the responsive image grid..

/* remove spacing between columns */
.row.no-gutter [class*='col-'] {
  padding-right:0;
  padding-left:0;
}

http://codeply.com/go/KoZilXlyin