Novice programmer seeking assistance with bootstrap4.
I'm attempting to set up a list group item to showcase user reviews.see image description here
I've tried adjusting every possible element.
At first glance, it appears straightforward, but I am stuck.
Would appreciate your thoughts. Do I need specific CSS for this?
<div class="panel-heading">
<div class="panel-body">
<div class="list-group">
{% if comments %}
{% for comment in comments %}
<div class="list-group-item ">
<!--left hand side of table to store username, userstatus and userimage -->
<div class="col-lg-2 col-md-2 col-xs-2 col-sm-2 col-xl-2">
<div class="col-lg-12" align="center">
<p><a href="{% url 'profile' comment.user %}">{{ comment.user }}</a></p>
</div>
<div class="col-lg-12" align="center">
<p class="status">({{ comment.user.status }})</p>
</div>
<div>
<img class="rounded mx-auto d-block" width="64" height="64" src="{{ MEDIA_URL}}{{ comment.user.picture }}"/><p>
</div>
</div>
<!--right hand side of table to store date comment posted and comment -->
<div class="col-lg-8 col-md-8 col-xs-8 col-sm-8 col-xl-8">
<div class="col-lg-12" align="left">
<p>Posted: {{ comment.created}}</p>
</div>
<div>
<p>{{comment.body}}</p>
</div>
</div>
</div>
{% endfor %}
{% else %}
<p>There are no comments</p>
{% endif %}
</div>
</div>
</div>