Jordan Thornquest Jordan Thornquest - 4 months ago 42
CSS Question

Multi-row blog list in Jekyll

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

Columned blog post

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

These are actually two questions.

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

I answered two similar questions yesterday:

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:

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!