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

<!-- Heading & Description -->
<h4 class="dark-gray-text text-center display-6 p-2"> Tags</h4>

<ul class="list-group gray">
    {% if site.tags.size!=0 %}
    {% for tag in site.tags %}
    {% capture tag_name %}{{ tag | first }}{% endcapture %}
    <li class="list-group-item d-flex justify-content-between align-items-center {% if page.tag == tag_name  %} active white {% endif %}'">
        <a href="/blog/tags/{{ tag_name }}"> {{ tag_name }}</a>
        <span class="badge badge-primary badge-pill">{{ site.tags[tag_name].size }}</span>
    </li>
    {% endfor %}
    {% else %}
    <li class="list-group-item d-flex justify-content-between align-items-center">
        No Tags specified.
        <span class="badge badge-primary badge-pill">0</span>
    </li>
    {% endif %}
</ul>

</div>