Menu
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 Pinterest, if you will.
Bootstrap normal grid:
Bootstrap no rows concept:
Perhaps the correct answer is "don't use bootstrap" but having built many sites with it, I would love to continue using it and find a way around this.
If indeed i should use another responsive framework with a grid system more like what I need, what would you recommend?
tia
689
Rows must always be placed inside of a container. Rows span the width of the container. They have a negative 15 pixel margin at the end, essentially removing the 15 pixel margin set by its container. This is because the columns each have a 15 pixel margin of their own that replaces the container's margin.
Use rows to create horizontal groups of columns. Content should be placed within columns, and only columns may be immediate children of rows.
Bootstrap uses a 12-column grid system that can update itself responsively based on screen size. There are only 38 highly composite numbers below the one million threshold, including 120, 2520, 5040, 55440 and 720720.
This is done by adding the class “col-SIZE-SIZE_TO_OCCUPPY”. For example, . col-md-4 which means take 4 columns on the medium-sized screens. If we stack multiple column classes on a single element we can define how we want the layout to look like on other screens and change the columns to rows as we want.
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
74
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
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
