使用Bootstrap 4水平居中动态div.card

Question

I'm listing articles from a database on a website based on Bootstrap 4. I would like the blocks (div.card) to always be centered horizontally no matter how much there are with a maximum of 3 blocks per line. I'm pretty sure there's a simple way to do it but my tests where unsuccessful so far.

Here's the page : http://www.0000.yelofox.fr/nos-actualites (You'll probably need to connect, I'm not sure as I'm logged in automatically. I can provide the password if needed)

The loop I use is made up that way :

echo '<section id="actualites" class="text-center">';
echo '<h2>Nos actualités</h2>';
echo '<div class="row">';
while ($data_news = mysqli_fetch_assoc($rq)){
    echo '<article class="card col-md-3">';
    echo '...';
    echo '</article>';
}
}
echo '</div>';
echo '</section>';

Let me know if you need further elements.

Thanks for you help

Answer 1

Seeing that the class="text-center" didn't work. You can try the following...

echo '<section id="actualites" class="text-center">';
echo '<h2>Nos actualités</h2>';
echo '<div class="row">';
while ($data_news = mysqli_fetch_assoc($rq)){
    echo '<article class="card col-md-3" style="text-align: center !important;">';
    echo '...';
    echo '</article>';
}
}
echo '</div>';
echo '</section>';