Overlapping Rows/columns Using Bootstrap Grid

Issue: Attempting to create this layout. I also need it to be in 2 forms. Since you are unable to nest forms, I have been trying to use some styling to get the top left col-md-4 to

Solution 1:

I have tried using jQuery Masonry plugin.

Just used a wrapper for whole of your markup and finally achieved what you needed using little JS initialization for the plugin.

$('#grid').masonry({
   columnWidth: 320,
   itemSelector: '.grid-item'
  });

Please have a look at the fiddle. It looks a bit ugly, though the purpose is solved.

Note: I have not used bootstrap classes.

Code

Full screen FIDDLE

Solution 2:

I think i fixed it with this, you were using to many columns.

<divclass="row"><formid="form1"style="display: inline;"><divclass="col-md-4"><divclass="panel panel-default"><divclass="panel-heading">Title</div><divclass="panel-body">Content here..</div></div><divclass="panel panel-default"><divclass="panel-heading">Title</div><divclass="panel-body">Content here..</div></div><divclass="panel panel-default"><divclass="panel-heading">Title</div><divclass="panel-body">Content here..</div></div></div></form><formid="form2"style="display: inline;"><divclass="col-md-4"><divclass="panel panel-default"><divclass="panel-heading">Title</div><divclass="panel-body">Content here..</div></div><divclass="panel panel-default"><divclass="panel-heading">Title</div><divclass="panel-body">Content here..</div></div><divclass="panel panel-default"><divclass="panel-heading">Title</div><divclass="panel-body">Content here..</div></div></div><divclass="col-md-4"><divclass="panel panel-default"><divclass="panel-heading">Title</div><divclass="panel-body">Content here..</div></div><divclass="panel panel-default"><divclass="panel-heading">Title</div><divclass="panel-body">Content here..</div></div><divclass="panel panel-default"><divclass="panel-heading">Title</div><divclass="panel-body">Content here..</div></div></div></form></div>