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:

Answer 1

An example with explanation that uses four columns:

<div class="container">

    {% for post in site.posts %}

        {% cycle 'add row' : '<div class="row">', nil, nil, nil %}

            <div class="col-sm-3">
                <!-- liquid tags here -->
            </div>

        {% cycle 'end row' : nil, nil, nil, '</div>' %}

    {% endfor %}
    {% cycle 'end row' : nil, '</div>', '</div>', '</div>' %}

</div>

Consider the first cycle. The first and every fourth iteration through the loop, a new row div is added. The rest of the time nothing happens because of the nil arguments.

{% cycle 'add row' : '<div class="row">', nil, nil, nil %}

Consider the second cycle. Every fourth iteration through the loop the row div is closed. The other iterations pass through nil and nothing happens.

{% cycle 'end row' : nil, nil, nil, '</div>' %}

Consider the third cycle. This uses the same end row identifier as the previous cycle, so it follows the same order. The point is to close the last row except in the case when the previous cycle handles it.

{% cycle 'end row' : nil, '</div>', '</div>', '</div>' %}

Finally, to get the right number of columns with Bootstrap, use the appropriate cell class. I used .col-sm-3 to get four columns (12/3) to display on desktops and tablets but not phones.

<div class="col-sm-3"></div>

For three columns, use:

{% cycle 'add row' : '<div class="row">', nil, nil %}
{% cycle 'end row' : nil, nil, '</div>' %}
{% cycle 'end row' : nil, '</div>', '</div>' %}
<div class="col-sm-4"></div>

For two columns, use:

{% cycle 'add row' : '<div class="row">', nil %}
{% cycle 'end row' : nil, '</div>' %}
{% cycle 'end row' : nil, '</div>' %}
<div class="col-sm-6"></div>

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.

Answer 3

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 4

I have this in place on a jekyll project displaying posts in a Bootstrap grid, and it works great:

<div class="container">

    <div class="row">

        <ul>
            {% for product in site.pages %}
            {% if product.sub-category == 'sample-category' %}

            <li>
                <div class="col-xs-12 col-sm-4 col-md-3">
                    <a href="{{ product.url }}">
                        <img src="{{ product.img }}" />
                        <h3>{{ product.title }}</h3>
                        <h4>{{ product.part_number }}</h4>
                    </a>
                </div>
            </li>

            {% endif %}
            {% endfor %}

        </ul>

    </div>

</div>