Displaying Posts in a three-column grid

I wanna display my posts as Bootstrap cards (it fits my use case) in a three-column Bootstrap grid (which I’ve already built), like this:

1 2 3
4 5 6
7 8 9
10 11 12

How do I do that? Thanks.


I think your question is more bootstrap-related, so you might want to seek out support on Stack Overflow or maybe a bootstrap thread.

I only have a very basic understanding of Bootstrap, but it would seem it is pretty straightforward to set up rows and columns using cards. I found a few good starting points:

It looks like you simply create card rows and columns using <div> tags.

Looking at the bootstrap documentation (the first link), it looks like it is as easy as doing something like this:

<div class="container">
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
  <div class="row">
    <div class="col">4</div>
    <div class="col">5</div>
    <div class="col">6</div>
  <div class="row">
    <div class="col">7</div>
    <div class="col">8</div>
    <div class="col">9</div>
  <div class="row">
    <div class="col">10</div>
    <div class="col">11</div>
    <div class="col">12</div>

I’m only starting with both Jekyll and Bootstrap, so help is very appreciated, even redirecting me to other places!

No worries. I recently wrote an article here on this site you might want to read. It will help ground you in the concepts. There are also links to some training videos you might find helpful.

[edit: added link :slight_smile:]