Bootstrap without rows?

Question

I love bootstrap, but i\'m trying to achieve something totally outsides its expected grid, which is to have cells stack under each other without grouped lines. Something like Pi

Answer 1

you can use row in col and then but new cols in these rows if you have problem in padding make your classes no-padding / no-left-padding / no-right-padding

<div class="row">
    <div class="col-md-3">
        <div class="row">
            <div class="col-md-12"></div>
        </div>
    </div>
    <div class="col-md-9">
        <div class="row">
            <div class="col-md-4"></div>
            <div class="col-md-4"></div>
            <div class="col-md-4"></div>
        </div>
    </div>
</div>

Answer 2

I've worked on a similar problem for a nested drag'n-drop box api with goal to be compliant with bootstrap grid on final render, the builder wasn't a bootstrap grid but a home made similar paradigm of bootstrap grid and I've fixed it with the CSS3 marvelous flexbox

take a look at Solved by flexbox

I have putted a root row (only one for multiline) and added a class to it which implement

display: flex;
flex-wrap: wrap;

eg:

<div class="row flex-row">
    <div class="col-6">Variable height content</div>
    <div class="col-3">...</div>
    <div class="col-12">...</div>
    <div class="col-3">...</div>
    ...
</div>

and the css

.flex-row{
    display: flex;
    flex-wrap: wrap;
}

this will have the effect to adjust automatically the height of all the box that is on same line to the bigger one

Answer 3

The key thing to realize about the col-(size)-(gridsize) is that they will wrap left to right then top to bottom. So, if you make a col with a grid size less than 12, other col will begin to wrap around. You can also nest them as needed to split up the page. So, it's possible to create a 'rowless' layout like so:

(this isn't an amazing demo but it illustrates that what you want is possible) http://jsfiddle.net/7575A/1/

Answer 4

Looks like you have to use JS to reach goal.

You can use following libs:

Jquery Wookmark - Light weight and fast. Used in myself resolving similar issue

Isotope - Flexible and reach functions one

Mansonry - Popular lib, similar to Isotope

Answer 5

You could try inverting columns and rows in bootstrap.

<div class="row">
    <div class="col-sm-4">
        <div class="row">Some content here</div>
        <div class="row">Some content here with more text than the first content but it still needs some more</div>
        <div class="row">Some content here</div>
        <div class="row">Some content here</div>
        <div class="row">Some content here</div>
    </div>
    <div class="col-sm-4">
        <div class="row">Some content here</div>
        <div class="row">Some content here</div>
        <div class="row">Some content here</div>
        <div class="row">Some content here</div>
    </div>
</div>

Here is a jsfiddle of this.