{% extends 'babybuddy/page.html' %}
{% load static %}

{% block title %}Dashboard{% endblock %}

{% block breadcrumbs %}
    <li class="breadcrumb-item font-weight-bold">Dashboard</li>
{% endblock %}

{% block content %}
    <div class="row">
    {% for object in objects %}
        <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-2 mb-4">
            <div class="card">
                <a href="{% url 'child' object.slug %}">
                     <img src="{% static 'babybuddy/img/core/child-placeholder.png' %}"
                          class="child-photo img-fluid" />
                </a>
                <div class="card-body text-center">
                    <h4 class="card-title">{{ object }}</h4>
                    <div class="card-text">
                        <p class="lead">
                            Born <span class="text-secondary">{{ object.birth_date }}</span><br/>
                            Age <span class="text-secondary">{{ object.birth_date|timesince }}</span>
                        </p>
                        {% include 'dashboard/child_button_group.html' %}
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
    </div>
{% endblock %}
{% extends 'babybuddy/page.html' %}
{% load static %}

{% block title %}Dashboard{% endblock %}

{% block breadcrumbs %}
    <li class="breadcrumb-item font-weight-bold">Dashboard</li>
{% endblock %}

{% block content %}
    <div class="row">
    {% for object in objects %}
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-2 mb-4">
            <div class="card">
                <a href="{% url 'child' object.slug %}">
                     <img src="{% static 'babybuddy/img/core/child-placeholder.png' %}"
                          class="child-photo img-fluid" />
                </a>
                <div class="card-body text-center">
                    <h4 class="card-title">{{ object }}</h4>
                    <div class="card-text">
                        <p class="lead">
                            Born <span class="text-secondary">{{ object.birth_date }}</span><br/>
                            Age <span class="text-secondary">{{ object.birth_date|timesince }}</span>
                        </p>
                        {% include 'dashboard/child_button_group.html' %}
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
    </div>
{% endblock %}
Remove xl column setting for child cards.
Remove xl column setting for child cards.

The lower resolutions of the xl breakpoint did not render this well (the button bar overflows cards).
