<div class=“row my-3 card grey lighten-4 m-3”>

<!-- Heading & Description -->
<h4 class="dark-gray-text text-center display-6 p-2 m-1"> Categories</h4>
<ul class="list-group gray">
    {% if site.categories.size!=0 %}
    {% for category in site. categories %}
    {% capture category_name %}{{ category | first }}{% endcapture %}
    <li class="list-group-item d-flex justify-content-between align-items-center {% if page.category == category_name  %} active white {% endif %}">
        <a href="/blog/categories/{{ category_name }}"> {{ category_name }}</a>
        <span class="badge badge-primary badge-pill">{{ site.categories[category_name].size }}</span>
    </li>
    {% endfor %}
    {% else %}
    <li class="list-group-item d-flex justify-content-between align-items-center">
        No categories specified.
        <span class="badge badge-primary badge-pill">0</span>
    </li>
    {% endif %}
</ul>

</div>