Bootstrap columns and Wordpress Posts - php

Question

So I'm converting bootstrap site to Wordpress and post cards don't want to stack horizontally... I know there should be foreach loop which will loop through posts but I don't know how to set it up...
<?php while(have_posts()) {
the_post();
?>
<section id="blog" class="py-3">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card-columns">
<div class="card">
<img src="<?php the_post_thumbnail_url('medium')?>" alt="" class="img-fluid card-img-top">
<div class="card-body">
<h4 class="card-title">
<?php the_title(); ?>
</h4>
<small class="text-muted">Written by <?php the_author_posts_link(); ?></small>
<hr>
<p class="card-text"><?php the_excerpt(); ?></p>
</div>
</div>
</div>
</div>
</div>
</section>
<?php } ?>

Answer 1

while is also a loop. Inside the loop, you can just put the repeated code. As I've understood your code than you need to something like this:
<section id="blog" class="py-3">
<div class="container">
<div class="row">
<?php while( have_posts() ) {
the_post();
?>
<div class="col-md-4">
<div class="card-columns">
<div class="card">
<img src="<?php the_post_thumbnail_url('medium')?>" alt="" class="img-fluid card-img-top">
<div class="card-body">
<h4 class="card-title">
<?php the_title(); ?>
</h4>
<small class="text-muted">Written by <?php the_author_posts_link(); ?></small>
<hr>
<p class="card-text"><?php the_excerpt(); ?></p>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</section>
Also, better to move code for one block to another file for example partials/post.php:
<div class="col-md-4">
<div class="card-columns">
<div class="card">
<img src="<?php the_post_thumbnail_url('medium')?>" alt="" class="img-fluid card-img-top">
<div class="card-body">
<h4 class="card-title">
<?php the_title(); ?>
</h4>
<small class="text-muted">Written by <?php the_author_posts_link(); ?></small>
<hr>
<p class="card-text"><?php the_excerpt(); ?></p>
</div>
</div>
</div>
</div>
And update your current file:
<section id="blog" class="py-3">
<div class="container">
<div class="row">
<?php while( have_posts() ) {
the_post();
get_template_part( 'partials/post' );
} ?>
</div>
</div>
</section>