I am making themes of WordPress. The cards I create with Bootstrap normally need to be side by side, but they come at the block element level. What should I do to keep blog posts side by side?

<div class="container mt-5">

    <h3><?php bloginfo("name"); ?></h3>


    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

        <div class="card-group" >
            <div class="card" >
                <div class="card-body" >
                    <?php the_title( '<h5 class="card-title">', '</h5>' ); ?>
                    <p class="card-text"><?php the_excerpt(); ?></p>
                    <a class="btn btn-info" href="<?php the_permalink(); ?>">Devamını Oku</a>
                </div>
            </div>
        </div>

    <?php endwhile; endif; ?>

</div>

I am making themes of WordPress. The cards I create with Bootstrap normally need to be side by side, but they come at the block element level. What should I do to keep blog posts side by side?

<div class="container mt-5">

    <h3><?php bloginfo("name"); ?></h3>


    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

        <div class="card-group" >
            <div class="card" >
                <div class="card-body" >
                    <?php the_title( '<h5 class="card-title">', '</h5>' ); ?>
                    <p class="card-text"><?php the_excerpt(); ?></p>
                    <a class="btn btn-info" href="<?php the_permalink(); ?>">Devamını Oku</a>
                </div>
            </div>
        </div>

    <?php endwhile; endif; ?>

</div>

• design

1 Answer 1

That's because you are creating a card group in each iteration of the loop. You should move the <div class="card-group" > div out of the loop.