CODEWITHSUNDEEP
csstwitter-bootstrap
ericosg
ericosg

Reputation: 4965

Bootstrap without rows?

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: enter image description here

Bootstrap no rows concept: enter image description here

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

Upvotes: 13

Views: 24132

Answers (5)

DevTheJo
DevTheJo

Reputation: 2497

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

Upvotes: 13

Evgeniy
Evgeniy

Reputation: 2921

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

Upvotes: 5

serakfalcon
serakfalcon

Reputation: 3531

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/

Upvotes: 2

Mezzdeen
Mezzdeen

Reputation: 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>

Upvotes: 0

gpantic
gpantic

Reputation: 103

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.

Upvotes: 2

Related Questions