Bootstrap grid while loop

Question

Bootstrap grid while loop

Miikinki

2022年2月22日 03:08

I made a grid with bootstrap where i want to show 5 differents posts but for some reason it duplicates the grids and shows one post per grid.

First image shows how it starts to duplicate the grids 5 times instead of just showing 5 posts in those columns. Second picture shows how i would like to work.

    ?php get_header(); ?


main
div class="container"
  div class="row" ?php

$args = array(
?php
'post_type' =post_type' = 'post,
'posts_per_page' = 5,
);

$blogposts = new WP_Query($args);

while($blogposts-have_posts()) {
    $blogposts-the_post(); ?



div class="col-md-6"
      a href="?php the_permalink(); ?
        div class="card border-0"
          div class="card-picture"

            img class="card-img" src="?php echo get_the_post_thumbnail_url(get_the_ID()); ?" alt="Card image"

            div class="card-img-overlay d-flex flex-column"
              h5 class="card-title font-weight-bold"?php the_title(); ?/h5
              div class="mt-auto" Miika - i class="fas fa-clock"/i 16.2.2020 - Oppaat/div
            /div
          /div
        /div
      /a
    /div

    div class="col-md-6"
      a href="?php the_permalink(); ?"
        div class="card border-0"
          div class="card-picture"

            img class="card-img" src="?php echo get_the_post_thumbnail_url(get_the_ID()); ?" alt="Card image"

            div class="card-img-overlay d-flex flex-column"
              h5 class="card-title font-weight-bold"?php the_title(); ?/h5
              div class="mt-auto"Miika - i class="fas fa-clock"/i 16.2.2020 - Oppaat/div
            /div
          /div
        /div
      /a
    /div
  /div



  div class="row"
    div class="col-md-4"
      a href="?php the_permalink(); ?"

        div class="card border-0"
          div class="card-pic"

            img class="card-img" src="?php echo get_the_post_thumbnail_url(get_the_ID()); ?" alt="Card image"

            div class="card-img-overlay d-flex flex-column"
              h3 class="card-title font-weight-bold"?php the_title(); ?/h3
              div class="mt-auto"Miika - i class="fas fa-clock"/i 16.2.2020 - Oppaat/div

            /div
          /div

        /div
      /a
    /div

    div class="col-md-4"
      a href="?php the_permalink(); ?"
        div class="card border-0"
          div class="card-pic"

            img class="card-img" src="?php echo get_the_post_thumbnail_url(get_the_ID()); ?" alt="Card image"

            div class="card-img-overlay d-flex flex-column"
              h5 class="card-title font-weight-bold"?php the_title(); ?/h5
              div class="mt-auto"Miika - i class="fas fa-clock"/i 16.2.2020 - Oppaat/div
            /div
          /div
        /div
      /a
    /div
    div class="col-md-4"
      a href="?php the_permalink(); ?"

        div class="card border-0"
          div class="card-pic"

            img class="card-img" src="?php echo get_the_post_thumbnail_url(get_the_ID()); ?" alt="Card image"

            div class="card-img-overlay d-flex flex-column"
              h5 class="card-title font-weight-bold"?php the_title(); ?/h5
              div class="mt-auto"Miika - i class="fas fa-clock"/i 16.2.2020 - Oppaat/div
            /div
          /div
        /div
      /a
    /div

    ?php }
wp_reset_query();

Topic twitter-bootstrap loop wp-query Wordpress

Category Web

Miikinki · Accepted Answer · 2020年2月19日 19:14

   while($blogposts->have_posts()) {
    $blogposts->the_post(); ?>



<div class="col-md-6">
      <a href="<?php the_permalink(); ?>
        <div class="card border-0">
          <div class="card-picture">

            <img class="card-img" src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card image">

            <div class="card-img-overlay d-flex flex-column">
              <h5 class="card-title font-weight-bold"><?php the_title(); ?></h5>
              <div class="mt-auto"> Miika - <i class="fas fa-clock"></i> 16.2.2020 - Oppaat</div>
            </div>
          </div>
        </div>
      </a>
    </div>


    <?php }

Changing the while loop makes it show the 5 posts like i wanted but the posts are still not in the bootstrap columns.Picture below shows what im trying to achieve.

WebElaine · Accepted Answer · 2020年2月19日 18:27

Your while loop means, "Every time I have one post, output the following code." Since you have 5 divs inside the while loop, you are getting 5 copies for each post. So, change your while { } code to this, which will output just 1 div for every post:

while($blogposts->have_posts()) {
    $blogposts->the_post(); ?>



<div class="col-md-6">
      <a href="<?php the_permalink(); ?>
        <div class="card border-0">
          <div class="card-picture">

            <img class="card-img" src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card image">

            <div class="card-img-overlay d-flex flex-column">
              <h5 class="card-title font-weight-bold"><?php the_title(); ?></h5>
              <div class="mt-auto"> Miika - <i class="fas fa-clock"></i> 16.2.2020 - Oppaat</div>
            </div>
          </div>
        </div>
      </a>
    </div>


    <?php }

Bootstrap grid while loop

About