1

I would like the grid to fill all the space eg

enter image description here

and not

enter image description here

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>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
Steve Drake
  • 1,968
  • 2
  • 19
  • 41
  • Bootstrap can't do that unless you build the columns manually. Floats don't work that way. Related - http://stackoverflow.com/questions/8470070/how-to-create-grid-tile-view-with-css – Paulie_D Apr 19 '16 at 13:37
  • happy to remove it, I just dident know to search for the term Masonry , my google foo was weak :) – Steve Drake Apr 19 '16 at 15:22

1 Answers1

2

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 }'>
Tricky12
  • 6,752
  • 1
  • 27
  • 35
  • that's perfect, but now I have tried it I have gone with a new ROW every 3 cols which due to the content just looks better – Steve Drake Apr 19 '16 at 15:21