Looking to implement a dual-column layout for posts on WordPress using Bootstrap

Question

Looking to implement a dual-column layout for posts on WordPress using Bootstrap

Creating an intranet website for a client which functions similar to a Facebook or Twitter feed. The layout includes three columns using Bootstrap's grid system.

The first column serves as a navigation sidebar, while the other two columns should display posts in the following order:


1  2
3  4
5  6

Show more...

Having difficulty making Wordpress posts span across both columns. Currently, each post is placed in a div, resulting in stacked divs with large spaces between bigger posts.

Here is the current display of content:

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

Desired display:

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

Thank you in advance for your assistance.

html css wordpress twitter-bootstrap

Answer 1

Answer №1

One way to approach this issue is by iterating through your posts two times. During the first pass, you can render the first column and during the second pass, you can render the second column. In the first iteration, you can ignore even-numbered posts and in the second iteration, you can ignore odd-numbered posts. This way, you can structure your HTML by building up each column individually instead of row by row. Here's an example of how you can structure the HTML:

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

Answer 2

One way to approach this issue is by iterating through your posts two times. During the first pass, you can render the first column and during the second pass, you can render the second column. In the first iteration, you can ignore even-numbered posts and in the second iteration, you can ignore odd-numbered posts. This way, you can structure your HTML by building up each column individually instead of row by row. Here's an example of how you can structure the HTML:

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

Looking to implement a dual-column layout for posts on WordPress using Bootstrap

Answer №1

Similar questions

Gliding over the problem with the Azure line

How can PHP be used to implement server-side rate limiting for AJAX callbacks?

Ensure that site content remains visible above the table when refreshing the Ajax Table

Ensure that the heights of columns in UL CSS are aligned regardless of the number of lines they contain

How to ensure a list item remains in a fixed position when resizing the window

Ensure that column headers remain fixed when scrolling side to side

What is the best way to use jQuery to increment the number in an input field by a specific value?

An easy way to place text along the border of an input field in a React JS application using CSS

The feature to hide columns in Vue-tables-2 seems to be malfunctioning

Switch out the view div element with ui-router

Apply the child's style if the parent's sibling contains the specified class

Angular child component displaying of table data is not looping properly

Tips for achieving a background animation similar to the one shown on this page

How to modify the appearance of the md-tab-header component in Angular2

Creating a photo grid with consistent order is simple using flexbox

"Vertical Line Encoding: A Strategy for Improved Data

Select all feature in checkbox is malfunctioning

Using jQuery, is it possible to retrieve the product name and image dynamically?

CSS - Adding a Distinctive "Line" to a Navigation Bar

Foundation framework enables the creation of a full width footer that stands out