Wordpress Pagination on Custom Page not working

Question

I have made a custom post-type-page (page-portfolio.php) within the standard-Loop/Query and a second loop for the Custom-Post-Types. On this CPT-Page I would like to show a pagination. Therefore I'm using wp_bootstrap_pagination from here: github

On my regular Archive Pages, the navigation works, but only there. What is wrong? Is there any problem because of the two loops/querys?

     <?php
/**
 * Template Name: Portfolio
 * The template for displaying portfolio posts.
 *
 * @package Theme Name
 */

get_header(); ?>
<div id="content" class="site-content">
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">

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

                        <?php get_template_part( 'content', 'page' ); ?>

                        <?php if ( comments_open() || get_comments_number() ) : ?>
                                <section class="section-gradient">
                                    <div class="container">
                                        comments_template();
                                    </div><!-- .container -->
                                </section>
                        <?php endif; ?>

                <?php endwhile; // end of the loop. ?>
                <?php wp_reset_postdata(); ?>

        <section class="section-gradient">
            <div class="container">
                <div class="row">
                    <?php
                    $paged = ( get_query_var('page') ) ? get_query_var('page') : 1;
                    $args = array( 'post_type' => 'portfolio', 'paged' => $paged, 'posts_per_page' => 3 );
                    $loop = new WP_Query( $args );
                    while ( $loop->have_posts() ) : $loop->the_post(); ?>

                        <?php get_template_part( 'content', 'portfolio' ); ?>

                        <?php if ( comments_open() || get_comments_number() ) : ?>
                                <section class="section-gradient">
                                    <div class="container">
                                        comments_template();
                                    </div><!-- .container -->
                                </section>
                        <?php endif; ?>

                    <?php endwhile; // end of the loop. ?>
                    <?php wp_reset_postdata(); ?>
                </div><!-- .row -->
            </div>
        </section>
        <section class="section-lightdark">
            <div class="container">
            <?php
              if ( function_exists('wp_bootstrap_pagination') )
                wp_bootstrap_pagination();
            ?>
            </div>
        </section>
    </main><!-- #main -->
</div><!-- #primary -->

Answer 1

try to insert if ($loop->have_posts()) :

before while, and close this condition before endwhile.