Multi-row blog list in Jekyll

Question

I want to use Jekyll & Bootstrap 3 to present my blog posts in a listing that looks like this:

See how the posts are columnized with 2 per row? Can this same effect be acheived with Liquid and Bootstrap 3's grid system?

Answer 1

These are actually two questions.

Number one: How to display two posts in each row with Jekyll/Liquid?

I answered two similar questions yesterday:

• For loop, wrap every two posts in a div
  (one solution for a fixed number of posts - like the last 10 posts in groups of two on the front page - and one solution for an infinite number of posts)
• Jekyll automatically processing rows
  (another solution with an infinite number of posts, but with four posts per group and with a detailed step-by-step explanation)

Number two: How to achieve a design similar to the one in your screenshot in Bootstrap?

Bootstrap has a page with example designs that you can steal. Especially these two:

• Jumbotron
• Narrow jumbotron

Look at the source code of the example pages - basically, you just have to wrap the posts in a few <div>s with the right classes.

For example, this is the source code for the three blocks in the Jumbotron example

<div class="row">
  <div class="col-md-4">
    <h2>Heading</h2>
    <p>blah</p>
  </div>
  <div class="col-md-4">
    <h2>Heading</h2>
    <p>blah</p>
 </div>
  <div class="col-md-4">
    <h2>Heading</h2>
    <p>blah</p>
  </div>
</div>

You just need to modify the code examples from my other answers (linked above) so that they generate a similar combination of <div>s.

Plus, you may want to read about Bootstrap's grid system to get the columns right (e.g. the class col-md-4 in the example code above varies depending on the number of columns you want).

---

Finally, a real-world example: My blog has a similar listing on the front page.
This is a fixed number of posts (the last nine, three rows of three), so I'm using the first approach from this answer.
The source code of the front page is here.
Note that I'm still on Bootstrap 2 (not 3), so you can't just copy and paste the CSS classes from my source code!

Answer 2

I have designed a theme for Jekyll using the Bootstrap 3. I know a lot of people want the column feature of bootstrap.

Check out this sample post from my theme showing example column configurations.