CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3grid-layout
David
David

Reputation: 45

bootstrap tumblr-like grid system

I'd like to have a tumblr-like grid layout for my bootstrap website. (example) The code below shows what I have right now using the grid system of bootstrap (my guess is that it is not designed to do things like this). Too bad some do not line up. 

<article class="col-md-6">
    <blockquote class="panel panel-default">
        <div class="panel-body">

            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut 
            fermentum nec, pulvinar in lectus. Suspendisse potenti. Cras quis sem sit amet lectus consectetur
            venenatis. Donec aliquam leovenenatis. Donec aliquam leo mi, vel fringilla purus commodo eget. Vivamus sit amet sapien sed
            mauris sodales ultrices vitae eget nisl. Nulla malesuada rhoncus mauris. Praesent vestibulum 
            auctor lorem mollis ornare.venenatis. Donec aliquam leo mi, vel fringilla purus commodo eget. Vivamus sit amet sapien sed 
            mauris sodales ultrices vitae eget nisl. Nulla malesuada rhoncus mauris. Praesent vestibulum 
            auctor lorem mollis ornare. mi, vel fringilla purus commodo eget. Vivamus sit amet sapien sed 
            mauris sodales ultrices vitae eget nisl. Nulla malesuada rhoncus mauris. Praesent vestibulum 
            auctor lorem mollis ornare.
            </p>
            <footer class="text-right">
            #1 — Maandag 20 januari 2014 — <cite>X</cite>
            </footer>

        </div>
    </blockquote>
</article>
<article class="col-md-6">
    <blockquote class="panel panel-default">
        <div class="panel-body">

            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut lor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut 
            fermentum nec, pulvinlor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut 
            fermentum nec, pulvinlor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut 
            fermentum nec, pulvin
            fermentum nec, pulvinar in lectus. Suspendisse potenti. Cras quis sem sit amet lectus consectetur
            venenatis. Donec 
            </p>
            <footer class="text-right">
            #1 — Maandag 20 januari 2014 — <cite>X</cite>
            </footer>

        </div>
    </blockquote>
</article>
    <article class="col-md-6">
    <blockquote class="panel panel-default">
        <div class="panel-body">

            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut 
            fermentum nec, pulvinar in lectus. Suspendisse potenti. Cras quis sem sit amet lectus consectetur
            venenatis. Donec um dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut 
            fermentum nec, pulvinar in lectus. Suspendisse potenti. Cras quis sem sit amet lectus consectetur
            venenatis. Donec 
            </p>
            <footer class="text-right">
            #1 — Maandag 20 januari 2014 — <cite>X</cite>
            </footer>

        </div>
    </blockquote>
</article>
    <article class="col-md-6">
    <blockquote class="panel panel-default">
        <div class="panel-body">

            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut 
            fermentum nec, pulvinar in lectus. Suspendisse potenti. Cras quis sem sit amet lectus consectetur
            venenatis. Donec 
            </p>
            <footer class="text-right">
            #1 — Maandag 20 januari 2014 — <cite>X</cite>
            </footer>

        </div>
    </blockquote>
</article>
<article class="col-md-6">
    <blockquote class="panel panel-default">
        <div class="panel-body">

            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut 
            fermentum nec, pulvinar in lectus. Suspendisse potenti. Cras quis sem sit amet lectus consectetur
            venenatis. Donec aliquam leo mi, vel fringilla purus commodo eget. Vivamus sit amet sapien sed 
            mauris sodales ultrices vitae eget nisl. Nulla malesuada rhoncus mauris. Praesent vestibulum 
            auctor lorem mollis ornare.venenatis. Donec aliquam leo mi, vel fringilla purus commodo eget. Vivamus sit amet sapien sed 
            mauris sodales ultrices vitae eget nisl. Nulla malesuada rhoncus mauris. Praesent vestibulum 
            auctor lorem mollis ornare.
            </p>
            <footer class="text-right">
            #1 — Maandag 20 januari 2014 — <cite>X</cite>
            </footer>

        </div>
    </blockquote>
</article>              
<article class="col-md-6">
    <blockquote class="panel panel-default">
        <div class="panel-body">

            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut 
            fermentum ne
            </p>
            <footer class="text-right">
            #1 — Maandag 20 januari 2014 — <cite>X</cite>
            </footer>

        </div>
    </blockquote>
</article>

JSfidle (you might have to enlarge the Result panel because the responsive design)

I wonder how I can make all columns show next or below the previous one without some massive gaps like there are now.

Upvotes: 1

Views: 1214

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362780

You can try a CSS grid solution like this..

.container.page {
 -moz-column-width: 39em;
 -webkit-column-width: 39em;
 -moz-column-gap: .75em;
 -webkit-column-gap: .75em;   
}

.col-sm-6 {
 display: inline-block;
 margin:  0.75rem;
 padding:  .5rem;
 width:  100%; 
 float:none;
}

Demo: http://bootply.com/108441

Or, you can accomplish this with a jquery plugin like masonry or isotope: http://bootply.com/99910

Upvotes: 0

grim
grim

Reputation: 6769

First add a parent layer of row and col and decide how many columns you want for the widest screen resolution (in this case 2 so we use col-md-6). Then for each column, add one other row with multiple columns in it.

<div class="row">
    <div class="col-md-6">
        <div class="row>
             <article class=col-md-12>...</article>
             <article class=col-md-12>...</article>
             <article class=col-md-12>...</article>
        </div>
    </div>
    <div class="col-md-6">
        <div class="row>
             <article class=col-md-12>...</article>
             <article class=col-md-12>...</article>
             <article class=col-md-12>...</article>
        </div>
    </div>
</div>

So basically you're using the child rows as columns of the parent. I hope this makes sense.

I've updated your jsfiddle

Also for reference, here's the Bootstrap documentation regarding grids.

EDIT: If you want to do it like on Tumblr, then you will need to load Masonry. With Masonry your markup will work just fine.

Upvotes: 2

Related Questions