wp-bootstrap/views/partials/comment-item.html.twig

<div class="comment d-flex gap-3 mb-4{% if depth > 0 %} ms-5{% endif %}" id="comment-{{ comment.id }}">
    <div class="flex-shrink-0">
        <img src="{{ comment.avatar_url }}" alt="{{ comment.author }}"
             class="rounded-circle" width="40" height="40" loading="lazy">
    </div>
    <div class="flex-grow-1">
        <div class="d-flex align-items-center gap-2 mb-1">
            <strong class="small">
                {% if comment.author_url %}
                    <a href="{{ comment.author_url|esc_url }}" class="text-decoration-none text-body" rel="nofollow">
                        {{ comment.author }}
                    </a>
                {% else %}
                    {{ comment.author }}
                {% endif %}
            </strong>
            <time class="text-body-secondary small" datetime="{{ comment.date_iso }}">
                {{ comment.date }}
            </time>
            {% if comment.edit_url %}
                <a href="{{ comment.edit_url|esc_url }}" class="text-body-secondary small">{{ __('Edit') }}</a>
            {% endif %}
        </div>
        <div class="comment-content small">
            {{ comment.content|raw }}
        </div>
        {% if comment.reply_url %}
            <div class="mt-1">
                {{ comment.reply_url|raw }}
            </div>
        {% endif %}

        {% if comment.children|length > 0 %}
            {% for child in comment.children %}
                {% include 'partials/comment-item.html.twig' with {'comment': child, 'depth': depth + 1} only %}
            {% endfor %}
        {% endif %}
    </div>
</div>