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?
These are actually two questions.
I answered two similar questions yesterday:
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
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!