Simple example

Here we have a simple example of how to beauitfy a list In this example we used students compared to eachother in a nice schema.

{% extends 'base.html.twig' %}

{% block title %}Teacheren{% endblock %}

{% block body %}
<div class="container my-5">
    <h1 class="text-center">Teachers</h1>

        <a href="{{ path('teacher_new') }}">Create new</a>
        {% for teacheren in teachers %}
        <div class="container border rounded my-5">
            <div class="row my-3">
                <div class="col-1"></div>

                <div class="col text-center border rounded py-3">
                <strong>Student 1:</strong> </br>
                {{ teacheren.student1 }}</div>
                <div class="col-4"></div>

                <div class="col text-center border rounded py-3">
                <strong>Score:</strong> </br>
                {{ teacheren.score1 }}</div>
                <div class="col-1"></div>
            </div>
            <div class="row my-3">
                <div class="col-1"></div>
                <div class="col text-center border rounded py-3">
                <strong>Student 2:</strong> </br>
                {{ teacheren.student2 }}</div>
                <div class="col-4"></div>
                <div class="col text-center border rounded py-3">
                <strong>Score:</strong> </br>
                {{ teacheren.score2 }}</div>
                <div class="col-1"></div>
            </div>
        </div>
        <div class="container">
            <div class="row my-3">
                <div class="col mx-auto text-center border rounded py-3">
                <strong>Winnaar:</strong></br>{{ if teacheren.winnaar  }}</div>
                </div>
        </div>
            <div class="container text-center">
                <a class="btn btn-primary" href="{{ path('teacher_show', {'id': teacheren.id}) }}">Bekijken</a> 
                 // recheck the path name with the correct function name of the controller in src/controller/teacher
                <a class="btn btn-primary" href="{{ path('teacher_edit', {'id': teacheren.id}) }}">Bewerken</a>
            </div>
        {% else %}
                <p colspan="4">no records found</p>
        {% endfor %}
{% endblock %}

Don't forget to check the path!! You can just t=w-s=s copy and paste this in any (index)twig file