Fit divs tightly - not in row layout

Question

I'm trying to figure out how to get my col-* divs to "fit snuggly" next to and underneath each other.

So I have a fair idea of how the whole grid system in bootstrap works, which is why I don't think that I can do what I'm trying to do without some weird CSS.

So basically, if I have 6 col-sm-4 divs (on a normal laptop screen, full sized), I'm going to end up with a row of 3 underneath a row of 3. If one of the divs in the top row is taller than the others, I'm going to have that whitespace the four remaining divs that are directly beneath each other.

So the question is thus, how do I get rid of that "whitespace", getting the rows to, well, not act like rows? I've tried having just the col-* divs, without wrapping row and container divs, but I still get the same result.

Did you considering removing the margins from the columns, so there is absolutely no whitespace? — matmik, May 31 '16 at 19:55
You can fit them "snuggly" next to each other by getting rid of their padding, like... .col-sm-4 {padding: 0px;} To fit them snuggly on top of each other, depending on your layout you'll need to figure out where the paddings and/or margins are that are causing it and eliminate those... .thumbnail {margin: 0px !important;} As for the last question, perhaps you are looking for nested rows? http://stackoverflow.com/questions/24659471/nested-rows-with-bootstrap-grid-system. — kilkfoe, May 31 '16 at 20:09

score 0 · Answer 1 · answered May 31 '16 at 19:54

0

Just wrap your 'elements' in 3 bootstrap divs (2 elements per div) in a single row... or am I missing something?

answered May 31 '16 at 19:54

Mr. Hugo

11,887
3
42
60

score 0 · Answer 2 · answered May 31 '16 at 19:57

This question has been asked many times in many forms and there are many solutions and YMMV.

One solution would be to use an nth-child() selector to clear the rows. Add in media queries to target various screen resolutions if needed.

.col-sm-4 {
  border: 1px dashed skyblue;
}
/* After every 3rd .col-sm-4 we apply clear: left; */
.col-sm-4:nth-child(3n+1) {
  clear: left;
}

<div class="container">
    <div class="row">
        <div class="col-sm-4">
        Content 1
        </div>
        <div class="col-sm-4">
        Content 2<br>
        Content 2<br>
        Content 2
        </div>
        <div class="col-sm-4">
        Content 3
        </div>
        <div class="col-sm-4">
        Content 4
        </div>
        <div class="col-sm-4">
        Content 5
        </div>
        <div class="col-sm-4">
        Content 6
        </div>
        <div class="col-sm-4">
        Content 7
        </div>
    </div>
</div>

Demo JSFiddle.

score 0 · Answer 3 · answered May 31 '16 at 19:58

The easiest way to do this would be to treat everything as one row and add each of your items within the cols. If you don't want the spacing between the cols, just remove the default padding.

Fiddle

  <div class="col-md-12">
    <div class="col-md-4">
      <div style="height:40px; background-color:black" ></div>
      <div style="height:15px; background-color:orange"></div>
    </div>
    <div class="col-md-4">
      <div style="height:20px; background-color:red"></div>
      <div style="height:55px; background-color:green"></div>
    </div>
    <div class="col-md-4">
      <div style="height:20px; background-color:yellow"></div>
      <div style="height:11px; background-color:gray"></div>
    </div>
  </div>

Fit divs tightly - not in row layout

3 Answers3