Bootstrap without strings?

Question

I like bootstrap, but I'm trying to achieve something completely outside of my expected grid, which should contain cells under each other without grouped rows. Something like Pinterest if you want.

Boot normal grid:

Bootstrap without the concept of lines:

Perhaps the correct answer is: “Do not use bootstrap,” but having built many sites with it, I would like to continue using it and find a way around this.

If I really have to use another flexible grid structure, more like what I need, what would you recommend?

TIA

Answer 1

It looks like you need to use JS to achieve the goal.

You can use the following libraries:

JQuery Wookmark - Easy and Fast. Used in me, resolving a similar problem.

Isotope - Flexible and affordable features

Mansonry - A popular library similar to Isotope

Answer 2

I worked on a similar problem for the nested drag-n-drop api package with the goal of being compatible with the bootstrap grid in the final rendering, the builder was not a bootstrap grid, but the home is the same boot grid paradigm and I fixed it with CSS3's wonderful flexbox

take a look at flexbox resolved

I placed the root string (only one for multi-line) and added a class to it that implements

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 css

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

this will automatically adjust the height of the entire window, located on one line, to a larger one.

Answer 3

The key to understanding col-(size)-(gridsize) is that they will wrap from left to right, and then from top to bottom. So, if you make col with a mesh size of less than 12, another col will start to wrap around. You can also nest them, if necessary, to split the page. Thus, you can create a "sleeveless" layout as follows:

(this is not an amazing demo, but it shows that what you want is possible) http://jsfiddle.net/7575A/1/

Answer 4

You can try to invert 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 the jsfiddle .

Answer 5

you can use the line in col and then, but the new cols in these lines if you have problems filling, 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>