Bootstrap Grid System new line does not look nice

Question

Recently, I started making an admin page on my site to edit multiple small tables (1-5 entries). They got all displayed on one page, and the tables got nested in a div as fo

Answer 1

You can solve this in various ways, depending on what you want to use and needed browser support.

---

Grid: The Rambo way
If you're sure your tables won't have more than five records, you could try giving them all an appropriate min-width. Surely not the most elegant of things, though.

---

Grid: The FlexBox way
As you can see from caniuse, FlexBox's browser support nowadays surely isn't bad. By setting this on the container element

.container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

and then doing the same on the children, or elements of the grid, you can make it so they all stretch to fill in that ugly white space, thus achieving another grid layout without being... unelegant?

---

Grid: The Javascript way
Another way to achieve a grid layout in this case is obviously using JavaScript to make it so they all have the same height as the highest element in the grid. The faster way would be using a jQuery plugin, which also lets you give them the same size by row only if needed, which seems fitting in your case. You already have to use jQuery because of Bootstrap anyway.

---

Masonry: The Javascript way
The non-grid system you specified with differing dimensions is called a Masonry Layout. There's a useful library for that as well, although I don't think it'd be worth if you only need to use such a layout in that area only. It also makes your markup quite dirty, and I don't know whether it fares well with Bootstrap.

---

Masonry: The Boostrap way
I'm not sure as I haven't tried it, but you could try organizing content this way:

<div class="row">
  <div class="col-sm-4">
    <!-- table 1 -->
    <!-- table 2 -->
  </div>
  <div class="col-sm-4">
    <!-- table 3 -->
    <!-- table 4 -->
  </div>
  <div class="col-sm-4">
    <!-- table 5 -->
    <!-- table 6 -->
  </div>
</div>

It might not be an optimal solution in case your tables need to be in a precise order, as well.

Answer 2

This is due to varying column height. You need a "clearfix" reset every 3 columns to force even wrapping. One way is to use the approach recommended by Bootstrap, or in this specific case you can use a simple CSS clearfix like this..

@media (min-width:992px) {
    .auto-clear .col-md-4:nth-child(3n+1){clear:left;}
}

Demo: http://codeply.com/go/mONLiFj30T

For other "clearfix" scenarios with different col width and grid tiers, there is a universal CSS only clearfix solution which will fit more scenarios (unsupported).

Another solution would be CSS columns, for a "masonry" style layout, but it doesn't use the Bootstrap grid: http://www.bootply.com/mYkzRDvbEq

See my more complete answer on this issue

Answer 3

All the columns in one container > row?

<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4">
    <!--table 1-->
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
    <!--table 2-->
</div>
...
<div class="col-xs-12 col-sm-4 col-md-4">
    <!--table 6-->
</div
</div>

Answer 4

You could use

<div class="clearfix visible-xs-block"></div>

For the various sizes at certain positions while keeping it flexible for different layouts.

<div class="row">
    <div class="col-xs-12 col-sm-4 col-md-4">
        <!--table 1-->
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4">
        <!--table 2-->
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4">
        <!--table 3-->
    </div>
    <div class="clearfix visible-sm-block visible-md-block"></div>
    ...
</div>