4

I have a bootstrap layout like this;

Layout

It is a single .row, containing 8 .col-lg-3 divs. The problem is, that there is so much vertical whitespace which is undesired and ugly. (The horizontal whitespace/margin is intended and unchangeable by the bootstrap desing anyway)

How can I make the boxes float in such a way, that the least amount of vertical space is occupied, while maintaining the columns? (Order of boxes does not matter)

I tried using Masonry but it doesn't handle the bootstrap floating of boxes very well and just ended up completely destroying my layout.

Is this possible without JavaScript? Obviously, there are other rows in which the boxes have different heights, and there are also not always exactly 8 boxes per row.

I just want to get this layout to be more concise and use all the space it has available...

F.P
  • 15,760
  • 32
  • 114
  • 184
  • do not merge masonry & bootstrap, use either one of them. – Mark Aug 28 '15 at 14:07
  • 1
    possible duplicate of [Is it possible to create a pinterest-like layout with Bootstrap only?](http://stackoverflow.com/questions/12570559/is-it-possible-to-create-a-pinterest-like-layout-with-bootstrap-only) – Claudio Bredfeldt Aug 28 '15 at 14:17
  • Re-order your columns with the deepest first? – Would still look ugly though. ;) – Duncan Tidd Aug 28 '15 at 15:02

3 Answers3

3

How can I make the boxes float in such a way, that the least amount of vertical space is occupied, while maintaining the columns? (Order of boxes does not matter)

Since you are using Bootstrap, the col-xx classes will interfere with the styles set in the bootstrap css. In order to do what you want, break free from bootstrap styling for this particular use-case and/or element(s). Rest continue using bootstrap styles.

You will need to use CSS columns here. And to keep it responsive, add all possible media queries.

You markup remains same, just remove the col-x classes. This will cause bootstrap styles to not apply.

<div class="container-fluid">
    <div id="col" class="row">
        <div>Lorem Ipsum</div>
        ...
    </div>
</div>

You now define your custom styles for child divs:

div#col > div { margin: 8px; padding: 6px; }
div#col > div:first-child { margin-top: 0px; } /* remove margin on first */

And all media queries for the parent container to allow custom column count, for example:

@media screen and (min-width:761px) {
    div#col { column-count: 4; column-gap: 0; padding: 8px; }
}
@media screen and (min-width:760px) {
    div#col { column-count: 3; column-gap: 0; padding: 8px; }
}
...

Complete Snippet:

div#col > div {
    margin: 8px; padding: 6px; background-color: #efefef;
    -webkit-column-break-inside: avoid;
}
div#col > div:first-child { margin-top: 0px; }

@media screen and (min-width:761px) {
    div#col { 
        -webkit-column-count: 4; -webkit-column-gap: 0; padding: 8px; 
        -moz-column-count: 4; -moz-column-gap: 0; 
        column-count: 4; column-gap: 0; 
    }
}
@media screen and (max-width:760px) {
    div#col { 
        -webkit-column-count: 3; -webkit-column-gap: 0; padding: 8px; 
        -moz-column-count: 3; -moz-column-gap: 0; 
        column-count: 3; column-gap: 0; 
    }
}
@media screen and (max-width:480px) {
    div#col { 
        -webkit-column-count: 2; -webkit-column-gap: 0; padding: 8px; 
        -moz-column-count: 2; -moz-column-gap: 0; 
        column-count: 2; column-gap: 0; 
    }
}
@media screen and (max-width:360px) {
    div#col { 
        -webkit-column-count: 1; -webkit-column-gap: 0; padding: 8px; 
        -moz-column-count: 1; -moz-column-gap: 0; 
        column-count: 1; column-gap: 0; 
    }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div id="col" class="row">
        <div>Lorem Ipsum</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        <div>Lorem Ipsum</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    </div>
</div>

Fiddle: http://jsfiddle.net/abhitalks/ar29jfqt/2/

Try resizing the pane in the above fiddle to all possible sizes and see if the columns rearrange themselves.

Abhitalks
  • 25,725
  • 4
  • 53
  • 74
  • This works well, but it has the side effect that it changes the box ordering. Whereas bootstrap placed the boxes in rows first (1-2-3-4, 5-6-7-8), this approach fills columns first (resulting in rows: 1-3-5-7, 2-4-6-8). – Rolleric May 26 '16 at 18:26
1

Check this out (only CCS, but no Bootstrap): http://cssdeck.com/labs/css-only-pinterest-style-columns-layout

Claudio Bredfeldt
  • 1,383
  • 15
  • 25
0

Try to do it like this :-

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

  <div class="row">
    <div class="col-md-3" style="border:1px solid #777777;">
      <div class="row">
        <div class="col-md-12" style="border:1px solid #777777;height:100px;">
        </div>
        <div class="col-md-12" style="border:1px solid #777777;height:450px;">
        </div>
      </div>
    </div>
    <div class="col-md-3" style="border:1px solid #777777;">
      <div class="row">
        <div class="col-md-12" style="border:1px solid #777777;height:100px;">
        </div>
        <div class="col-md-12" style="border:1px solid #777777;height:500px;">
        </div>
      </div>
    </div>
    <div class="col-md-3" style="border:1px solid #777777;">
      <div class="row">
        <div class="col-md-12" style="border:1px solid #777777;height:200px;">
        </div>
        <div class="col-md-12" style="border:1px solid #777777;height:200px;">
        </div>
      </div>
    </div>
    <div class="col-md-3" style="border:1px solid #777777;">
      <div class="row">
        <div class="col-md-12" style="border:1px solid #777777;height:400px;">
        </div>
        <div class="col-md-12" style="border:1px solid #777777;height:100px;">
        </div>
      </div>
    </div>

  </div>
</div>

</body>
</html>
Deepak Kumar
  • 183
  • 3
  • 15