firefly-iii/resources/views/partials/boxes.twig

{# Set box sizes: #}
{% if billCount > 0 %}
    {% set boxClasses = 'col-lg-3 col-md-3 col-sm-6 col-xs-12' %}
{% else %}
    {# Zero bills? Remove the boxes. #}
    {% set boxClasses = 'col-lg-4 col-md-4 col-sm-6 col-xs-12' %}
{% endif %}

<!-- Info boxes -->
<div class="row hidden-sm hidden-xs">
    <div class="{{ boxClasses }}">
        <div class="info-box">
            <span class="info-box-icon bg-red">
                <a href="{{ route('transactions.index',['withdrawal']) }}"><i class="fa fa-upload fa-fw"></i></a>
            </span>
            <div class="info-box-content">
                <span class="info-box-text"><a href="{{ route('transactions.index',['withdrawal']) }}">{{ 'moneyOut'|_ }}</a></span>
                <span class="info-box-number"><a href="{{ route('transactions.index',['withdrawal']) }}" id="box-out"></a></span>
            </div>
        </div>
    </div>
    <div class="{{ boxClasses }}">
        <div class="info-box">
            <span class="info-box-icon bg-green">
                <a href="{{ route('transactions.index',['deposit']) }}"><i class="fa fa-download faw-fw"></i></a>
            </span>

            <div class="info-box-content">
                <span class="info-box-text"><a href="{{ route('transactions.index',['deposit']) }}">{{ 'moneyIn'|_ }}</a></span>
                <span class="info-box-number"><a href="{{ route('transactions.index',['deposit']) }}" id="box-in"></a></span>
            </div>
        </div>
    </div>
    {% if billCount > 0 %}
        <div class="clearfix visible-sm-block"></div>

        <div class="{{ boxClasses }}">
            <div class="info-box">
            <span class="info-box-icon bg-blue">
                <a href="{{ route('bills.index') }}"><i class="fa fa-calendar fa-fw"></i></a>
            </span>

                <div class="info-box-content">
                    <span class="info-box-text"><a href="{{ route('bills.index') }}">{{ 'billsToPay'|_ }}</a></span>
                    <span class="info-box-number"><a id="box-bills-unpaid" href="{{ route('bills.index') }}"></a></span>
                </div>
            </div>
        </div>
        <div class="{{ boxClasses }}">
            <div class="info-box">
            <span class="info-box-icon bg-aqua">
                <a href="{{ route('bills.index') }}"><i class="fa fa-line-chart fa-fw"></i></a>
            </span>

                <div class="info-box-content">
                    <span class="info-box-text"><a href="{{ route('bills.index') }}">{{ 'billsPaid'|_ }}</a></span>
                    <span class="info-box-number"><a id="box-bills-paid" href="{{ route('bills.index') }}"></a></span>
                </div>
            </div>
        </div>
    {% endif %}
</div>