Centrer avec boostrap

30 juin 2020 à 16:03:15

Bonjour,

J'essaye depuis un moment à mettre au centre de la page (verticalement et horizontalement) ce bloc, mais rien n'y fait. Je dois me planter quelque part. Une aide serais grandement la bienvenue.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>{% block title %}Hello city{% endblock %}</title>
        {% block stylesheets %}
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        {% endblock %}
    </head>
    <body >
        <div class="d-flex flex-column">           
            <div class="text-center">                 
 
            {% block body %}{% endblock %}      
 
        <footer>
            <p>
               &copy; Copyright {{ 'now'|date("Y") }}
               &middot; <a href="{{ path('app_about') }}">About us</a>
            </p>
        </footer>
 
            </div>
        </div>
 
        {% block javascripts %}{% endblock %}
    </body>
</html>

Merci d'avance.

the_Dude

30 juin 2020 à 16:42:47

Il me semble que tu peux utiliser la classe mx-auto pour centrer horizontalement et my-auto pour centrer verticalement.

FabriceFabrice20

30 juin 2020 à 17:58:06

Bonjour,

Merci mais ça ne fonctionne pas. En faite je suis sa https://www.youtube.com/watch?v=yCPiX7_fy30&t=2252s même avec tailwind comme il montre dans cette vidéo ça ne marche pas. Je comprend vraiment rien.

-
Edité par FabriceFabrice20 30 juin 2020 à 17:58:33