Twitter Bootstrap style pagination in Jekyll

_config.yml

paginate:    10

index.html

<!-- post styling -->

{% for post in paginator.posts %}
  <h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
  <div class="content">
    {{ post.content }}
  </div>
  <aside class="details">posted on the <time>{{ post.date | date_to_string }}</time></aside>
{% endfor %}

<!-- pagination (a page1 folder isn't created by Jekyll.
To avoid 404s when going to the first page it must be
specified separately) -->

<div class="pagination">
  <ul>
    {% if paginator.previous_page %}
      {% if paginator.previous_page == 1 %}
        <li>
          <a href="/">&laquo;</a>
        </li>
      {% else %}
        <li>
          <a href="/page{{paginator.previous_page}}">&laquo;</a>
        </li>
      {% endif %}
    {% else %}
      <li class="disabled">
        <a href="#">&laquo;</a>
      </li>
    {% endif %}
    {% if paginator.page == 1 %}
      <li class="active">
        <a href="#">1</a>
      </li>
    {% else %}
      <li>
        <a href="/">1</a>
      </li>
    {% endif %}
    {% for count in (2..paginator.total_pages) %}
      {% if count == paginator.page %}
        <li class="active">
          <a href="#">{{count}}</a>
        </li>
      {% else %}
        <li>
          <a href="/page{{count}}">{{count}}</a>
        </li>
      {% endif %}
    {% endfor %}
    {% if paginator.next_page %}
      <li>
        <a href="/page{{paginator.next_page}}">&raquo;</a>
      </li>
    {% else %}
      <li class="disabled">
        <a href="#">&raquo;</a>
      </li>
    {% endif %}
  </ul>
</div>

style.css

/* ------- pagination -------- */

.pagination {
  height: 36px;
}

.pagination ul {
  display: inline-block;
  margin: 0;
  padding: 0;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.pagination li {
  display: inline;
}

.pagination li:first-child a {
  border-left-width: 1px;
  -webkit-border-radius: 3px 0 0 3px;
  -moz-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}

.pagination li:last-child a {
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}

.pagination a {
  float: left;
  padding: 0 14px;
  line-height: 34px;
  border: 1px solid #DDD;
  border-left-width: 0;
}

.pagination a:hover, .active a {
  background-color: whiteSmoke;
}

.disabled a, .disabled a:hover,
.active a, .active a:hover {
  color: #999;
  cursor: default;
}

.disabled a:hover {
  background-color: transparent;
}

It works like a charm, thanks :)

so cool thanks.

Thanks! I made my .pagination a { border-left-width: 1;} so that hover actions would apply to all four sides of each link.

Thanks! this works great 😄

Thanks!