WordPress – template part break wordpress columns layout

I think that some help will be appreciated. I have this code that will load two template part for a wordpres custom theme:

    <div class="row m-0">
        <?php get_template_part('assets/main', 'news'); ?>
        <?php get_template_part('assets/side', 'news'); ?>
    </div>

As you can see under the hood I’m using bootstrap 4 so it’s supposed that the content will align itself inside the same row.

I have a col-8 inside the main-news.php and a col-4 inside the side-news.php so I supposed that I will have the contents aligned, but this will not happen and my layout will break.

this is the code inside the main.news.php teplate part:

<?php $main_news = new WP_Query( array( 'post_type' => 'post', 'category_name' => 'main-news', 'posts_per_page' => 4) ); ?>
        <!-- main -->
        <div class="col-sm-12 col-md-8 col-lg-8 mt-2">
            <p class="text-uppercase font-weight-bold mb-0 section-title"><?php _e('Last news') ?></p>
        </div>
        <?php if( $main_news->have_posts() ): while( $main_news->have_posts() ): $main_news->the_post(); ?>
        <div class="col-sm-12 col-md-8 col-lg-8 mt-2 mb-2">
            <div class="card rounded-0 p-0">
                <img class="card-img-top w-100 h-100 rounded-0" src="<?php echo the_post_thumbnail_url(); ?>" />
                <div class="card-img-overlay news-overlay">
                    <a class="h4 stretched-link" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                </div>
            </div>
        </div>
<?php endwhile; endif; wp_reset_postdata() ?>

this is the content of side-news.php

<?php $middle_news = new WP_Query( array( 'post_type' => 'post', 'category_name' => 'market-news', 'posts_per_page' => 4 ) ); ?>
<div class="col-sm-12 col-md-4 col-lg-4">
    <p class="text-uppercase font-weight-bold mb-0 section-title"><?php _e('Side news') ?></p>
</div>
<?php if( $middle_news->have_posts() ): while( $middle_news->have_posts() ): $middle_news->the_post(); ?>
    <div class="col-sm-12 col-md-4 col-lg-4 mt-2 mb-2">
        <img class="img-fluid w-100" src="<?php echo the_post_thumbnail_url(); ?>" />
        <a class="h4 stretched-link" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>        
    </div>
<?php endwhile; endif; wp_reset_postdata(); ?>

How I can fix the layout to have the col-8 and the col-4 on the same row line?Maybe I need to nest the loops or what? See the scree to understand what’s happening now

Answer

your mistake is inside the main-news.php file. look, you defined these (col-sm-12 col-md-8 col-lg-8 ) for your first div tag in the main-news.php file so your div takes those columns and then you defined these (col-sm-12 col-md-8 col-lg-8 ) columns for the div tag inside of the loop at the same file so both divs take more than 12 columns just inside the main-news.php file whereas you defined (col-sm-12 col-md-4 col-lg-4) for the div inside of the side-news.php file again so these definitions break your code.

Solution: You should delete the columns definition from one of the divs inside the main-news.php file.

GOOD LUCK!!!