Bonjour,

Je me suis mis à Bootstrap depuis très récemment (depuis hier à vrai dire) et je rencontre un petit problème pour centrer du contenu horizontalement.

J'ai créé une div "container" dans laquelle j'ai placé une div "row", dans laquelle j'ai 3 divs.
Le soucis, c'est que je n'arrive pas à centrer (et répartir équitablement) les 3 divs au centre de ma page.

Voici un extrait d'exemple de mon code:

<div class="container">
    <div class="row">
        <div class="col-12 col-sm-12 col-md-4 col-lg-4">
            <div class="premier"></div>
        </div>

        <div class="col-12 col-sm-12 col-md-4 col-lg-4">
            <div class="deuxieme"></div>
        </div>

        <div class="col-12 col-sm-12 col-md-4 col-lg-4">
            <div class="troisieme"></div>
        </div>
    </div>
</div>

Et voici le résultat que cela me donne:

J'ai essayé d'enlever chacune des divs qui ont pour classe "col-12 col-sm-12 col-md-4 col-lg-4" et de ne laisser que les divs "premier" "deuxieme" "troisieme", tout en rajoutant la classe "justify-content-between" dans la div "row", et là c'était centré. Seulement, mes éléments ne possèdent plus les classes qui leur indique comment se positionner lorsque l'affichage se modifie.

Si une âme charitable pourrait m'expliquer comment corriger ceci, je lui en serais extrêmement reconnaissant.

Merci par avance.

Ps: J'ai également essayé de centrer tout ça avec une feuille de style à part, seulement, je trouve ça dommage d'y avoir recours s'il est possible de le faire directement avec bootstrap. D'autre part, ça n'a pas fonctionné...

Salut !

Peux-tu mettre tout ton code ?

J'ai essayé chez moi et ton code fonctionne comme tu le souhaites. Il doit y avoir une autre modification ailleurs.

Ce code

<div class="container">
    <div class="row">
        <div class="col-12 col-sm-12 col-md-4 col-lg-4" style="border:1px solid red">
            <div class="premier"><p>TEST</p></div>
        </div>
 
        <div class="col-12 col-sm-12 col-md-4 col-lg-4" style="border:1px solid red">
            <div class="deuxieme"><p>TEST</p></div>
        </div>
 
        <div class="col-12 col-sm-12 col-md-4 col-lg-4" style="border:1px solid red">
            <div class="troisieme"><p>TEST</p></div>
        </div>
    </div>
</div>

M'affiche bien les 3 blocs centrés même lorsque je suis en résolution lg :

Merci pour là réponse ! L’erreur venait (c’était prévisible) bien de moi effectivement, j’avais oublié d’enlever des marges...

Cependant, ce que je ne comprend pas, c’est pourquoi lorsque je rajoute la class « justify-content-between  » dans la div « row », rien ne se passe et mes 3 divs restent collées au centre et ne sont pas réparties ?

Edit: Au temps pour moi, je me suis rendu compte qu'avec 3 div qui doivent prendre 4 colonnes, il est évident qu'il ne reste plus de place pour les espacer... 

-
Edité par iDrums 14 mai 2018 à 1:46:43