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:

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