Problem with a grid bootstrap and wordpress - php

Question

I have a problem on this page my div.col-4 who is in div.col-9 don' t align.
I explain better with my code and my web page:
<div class="col-12 col-lg-9">
<?php
if (have_posts()) {
while(have_posts()) {
the_post(); //the_posts() invoque l itétrationde l article en cours
//the_title() afiche le titre de l article
?>
<div class="col-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title"><?=the_title();?></h5>
<p>Par <a class="font-weight-bold">La horde</a>, <a class="text-dark"><em style="font-size:12px;">le <?= get_the_date() ?></em></a></p>
<p class="card-text"><?= the_excerpt(); ?></p>
Lire la suite
</div>
</div>
</div>
<?php
}
}
?>
</div>
I have 4 article create in WordPress but on my web page it is appear in vertical align why ?
I show you with a picture of my web page and the render html:
Thank s for any help.
Have a nice day.
cedric

Answer 1

Columns will not work as needed if no row above
As Bootstrap official site said:
In a grid layout, content must be placed within columns and only
columns may be immediate children of rows.
So you have to add <div class="row"> below <div class="col-12 col-lg-9"> however this will not make all col-4 stay at the same row, since 4*4 = 16 so the last card will go down.
If you wish to put four cards in the same row you have to change col-4 to col-3 to make the total 12, as Bootstrap official site said:
Column classes indicate the number of columns you’d like to use out of
the possible 12 per row. So, if you want three equal-width columns
across, you can use .col-4.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="col-12 col-lg-9">
<div class="row">
<div class="col-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title"><?=the_title();?></h5>
<p>Par <a class="font-weight-bold">La horde</a>, <a class="text-dark"><em style="font-size:12px;">le <?= get_the_date() ?></em></a></p>
<p class="card-text"><?= the_excerpt(); ?></p>
Lire la suite
</div>
</div>
</div>
<div class="col-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title"><?=the_title();?></h5>
<p>Par <a class="font-weight-bold">La horde</a>, <a class="text-dark"><em style="font-size:12px;">le <?= get_the_date() ?></em></a></p>
<p class="card-text"><?= the_excerpt(); ?></p>
Lire la suite
</div>
</div>
</div>
<div class="col-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title"><?=the_title();?></h5>
<p>Par <a class="font-weight-bold">La horde</a>, <a class="text-dark"><em style="font-size:12px;">le <?= get_the_date() ?></em></a></p>
<p class="card-text"><?= the_excerpt(); ?></p>
Lire la suite
</div>
</div>
</div>
<div class="col-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title"><?=the_title();?></h5>
<p>Par <a class="font-weight-bold">La horde</a>, <a class="text-dark"><em style="font-size:12px;">le <?= get_the_date() ?></em></a></p>
<p class="card-text"><?= the_excerpt(); ?></p>
Lire la suite
</div>
</div>
</div>
</div>
</div>

Answer 2

I post the correct answer here:
<div class="col-12 col-lg-9">
<div class="row">
<?php
if (have_posts()){
while( have_posts()){
the_post(); //the_posts() invoque l itétrationde l article en cours
//the_title() afiche le titre de l article
?>
<div class="col-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title"><?=the_title();?></h5>
<p>Par <a class="font-weight-bold">La horde</a>, <a class="text-dark"><em style="font-size:12px;">le <?= get_the_date() ?></em></a></p>
<p class="card-text"><?= the_excerpt(); ?></p>
Lire la suite
</div>
</div>
</div>
<?php
}
}
?>
</div>
</div>