How do I use pagination on a search results page?

Question

I am running EE 7.3.12 and using Simple Search for a search box. The search works correctly but I am having trouble applying the pagination element.

Here is the search box code:

{exp:search:simple_form channel="youtube" search_in="everywhere" limit="9" result_page="member-content/search-results"}
    <input class="search ms-5" type="text" name="keywords" id="keywords" value="" size="18" maxlength="100" placeholder="Search">
  {/exp:search:simple_form}

Here is the results page code:

<h2>Search Results</h2>

<div class="row">
{exp:search:search_results paginate="bottom"}
<div class="col">
<div class="embed-responsive embed-responsive-16by9">
<iframe src="{url}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<h3 class="mt-3">{title}</h3>
<p>{excerpt}</p>
</div>

{if count == total_results}
</div><!-- /.row -->
{/if}
{paginate}
<p>Page {current_page} of {total_pages} pages {pagination_links}</p>
{/paginate}
{/exp:search:search_results}
                        
{if count == total_results}
    </div><!-- /.row -->
{/if}
{paginate}
    <p>Page {current_page} of {total_pages} pages {pagination_links}</p>
{/paginate}
{/exp:search:search_results}

Obviously Bootstrap rows and columns work differently than classic tables, but failure is not an option. How do I adjust this to properly display pagination?

Answer 1

I got some help from EE on this but I am going to post it to make it official.

Search uses results="9" instead of limit="9". With that in place the the following is no longer needed:

{if count == total_results}
    </div><!-- /.row -->
{/if}