Bootstrap Grid System fill all space

Question

I would like the grid to fill all the space eg

and not

My example has a fixed number of Panels, my project does not..

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">

  <div class="col-sm-4">
    <div class="panel panel-default">
      <div class="panel-heading sas-heading-green" xng-class="{1:'sas-heading-green',2:'sas-heading-orange',0:'sas-heading-red'}[innercount % 3]">
        <h3 class="panel-title">Title</h3>
      </div>
      <div class="panel-body">
        Content
        <button class="btn btn-default">
          Hello
        </button>
      </div>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="panel panel-default">
      <div class="panel-heading sas-heading-green" xng-class="{1:'sas-heading-green',2:'sas-heading-orange',0:'sas-heading-red'}[innercount % 3]">
        <h3 class="panel-title">Title</h3>
      </div>
      <div class="panel-body">
        Content
        <button class="btn btn-default">
          Hello
        </button>
      </div>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="panel panel-default">
      <div class="panel-heading sas-heading-green" xng-class="{1:'sas-heading-green',2:'sas-heading-orange',0:'sas-heading-red'}[innercount % 3]">
        <h3 class="panel-title">Title</h3>
      </div>
      <div class="panel-body">
        <ul class="list-group">
          <li class="list-group-item">Cras justo odio</li>
          <li class="list-group-item">Dapibus ac facilisis in</li>
          <li class="list-group-item">Morbi leo risus</li>
          <li class="list-group-item">Porta ac consectetur ac</li>
          <li class="list-group-item">Vestibulum at eros</li>
        </ul>
      </div>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="panel panel-default">
      <div class="panel-heading sas-heading-green" xng-class="{1:'sas-heading-green',2:'sas-heading-orange',0:'sas-heading-red'}[innercount % 3]">
        <h3 class="panel-title">Title</h3>
      </div>
      <div class="panel-body">
           <ul class="list-group">
          <li class="list-group-item">Cras justo odio</li>
          <li class="list-group-item">Dapibus ac facilisis in</li>
          <li class="list-group-item">Morbi leo risus</li>
          <li class="list-group-item">Porta ac consectetur ac</li>
          <li class="list-group-item">Vestibulum at eros</li>
        </ul>
        <button class="btn btn-default">
          Hello
        </button>
      </div>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="panel panel-default">
      <div class="panel-heading sas-heading-green" xng-class="{1:'sas-heading-green',2:'sas-heading-orange',0:'sas-heading-red'}[innercount % 3]">
        <h3 class="panel-title">Title</h3>
      </div>
      <div class="panel-body">
        Content
        <button class="btn btn-default">
          Hello
        </button>
      </div>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="panel panel-default">
      <div class="panel-heading sas-heading-green" xng-class="{1:'sas-heading-green',2:'sas-heading-orange',0:'sas-heading-red'}[innercount % 3]">
        <h3 class="panel-title">Title</h3>
      </div>
      <div class="panel-body">
        Content
        <button class="btn btn-default">
          Hello
        </button>
      </div>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="panel panel-default">
      <div class="panel-heading sas-heading-green" xng-class="{1:'sas-heading-green',2:'sas-heading-orange',0:'sas-heading-red'}[innercount % 3]">
        <h3 class="panel-title">Title</h3>
      </div>
      <div class="panel-body">
        Content
        <button class="btn btn-default">
          Hello
        </button>
      </div>
    </div>
  </div>


</div>

Answer 1

You cannot do this natively with Bootstrap, as floats do not align in this way. However, there are plugins that will allow you to do alignment in this sort of way. One really good one is Masonry.

Here is a Demo of Masonry

It's very simple to use in its basic form:

<div class="container" data-masonry='{ "itemSelector":".col-sm-4", "fitWidth": true }'>