Bootstrap Label Styled Tags in Ghost

In this tutorial I'm going to show you how-to create Bootstrap label styled tags in Ghost. This blog uses Bootstrap label styled tags. It looks like this:

Firstly, go to the partials directory and open loop.hbs. Now look for tags helper, which should be the word tags in double curly brackets; something like {{tags}}. Replace it with:

{{#if tags}}
    {{#foreach tags}}
        <a href="{{url}}" title="{{name}}" class="label label-default">{{name}}</a>
    {{/foreach}}
{{/if}}

Change the label-default CSS class to the variation you want. In the above example, I'm using the default label variation.

If you want to individually customize each tag, you can add label-{{id}} as a CSS class.

<a href="{{url}}" title="{{name}}" class="label label-{{id}}">{{name}}</a>

By using label-{{id}}, the incremental tag ID will be outputted, i.e. label-1, label-2, etc...

The CSS for each tag would look like this:

.label-1,
.label-1[href]:focus,
.label-1[href]:hover {
    background-color: #F0DB4F
}