CODEWITHSUNDEEP
htmlcsswordpresstwitter-bootstrap
Alex John Wiseman
Alex John Wiseman

Reputation: 31

Need two columns of posts in WordPress with bootstrap.

I am making a intranet site for a client and it works like a Facebook/twitter type feed. However the page is split into three columns using bootstraps grid.

One column is a sidebar for navagation, but the other two should be populated with posts in the following order. 

1  2
3  4
5  6

Show more...

I'm struggling with geting the wordpress posts to span over bother the columns.

I'm currenlty putting each post in a but this just stacks all of the divs and I get a large space between posts which are bigger.

Here is how the content is currently displaying.

https://i.sstatic.net/6FjJv.png

This is how I would like it.

https://i.sstatic.net/KDoXX.png

Many Thanks in advance for your help.

Upvotes: 0

Views: 432

Answers (1)

Jez
Jez

Reputation: 2444

How about looping through your posts twice, rendering the first column in the first pass and the second column in the second pass. The first time discard even-numbered posts, the second time discard odd-numbered posts. Then you can build up a column at a time, rather than a row at a time and structure the HTML like - 

<div class="row">
    <div class="col-md-6">
        <?php // loop through posts discarding evens ?>
    </div>
    <div class="col-md-6">
        <?php // loop through posts discarding odds ?>
    </div>
</div>

Upvotes: 1

Related Questions