1

I would like the format of my list of posts to follow something similar to this, where the year and month are separate columns:

enter image description here

I know how to specify the year and month for a list of posts, but my implementation ends up looking like this:

enter image description here

Does anyone have tips on how to do this using columns or similar? I'm guessing I need to change the Bootstrap template and incorporate the Liquid data within it, but I can't quite visualise how it would be done.

Community
  • 1
  • 1
luser
  • 355
  • 4
  • 14

1 Answers1

1

I don't know Liquid, but in order to use columns in bootstrap, create a grid structure and tag it with CSS classnames, here's one way to do it:

<div class="container">
    <div class="row">
        <div class="col-xs-2">
            <h2>2014</h2>
        </div>
        <div class="col-xs-2">
            <h3>February</h3>
        </div>
        <div class="col-xs-8">
            <h4><a href="#">My amazing post about something boring</a></h4>
            <h4><a href="#">My boring post about something amazing</a></h4>
            <p class="tags">
                Tagged: <span>java</span>  <span>proxy</span>
            </p>
        </div>
    </div>
</div>

See the docs for the bootstrap grid system.

Click Me, I'm The Demo Button!

Eliran Malka
  • 15,821
  • 6
  • 77
  • 100
  • That demo button is seriously amazing. Thanks for an example of how to define the columns. I'll figure out the Liquid myself at some point. – luser Feb 21 '14 at 12:41
  • sure, no problem. i didn't notice any reference to liquid, just saw the tag now. please add this information in the question body. – Eliran Malka Feb 21 '14 at 20:38