Customize "the_posts_pagination" and put list instead div

Making your Custom Pagination design In Demo According Your Need .

below function Replace Your Function:

function wp_custom_pagination($args = [], $class="pagination") {

if ($GLOBALS['wp_query']->max_num_pages <= 1) return;

$args = wp_parse_args( $args, [
        'mid_size'                   => 2,
        'prev_next'                  => false,
        'prev_text'                  => __('Previous', 'textdomain'),
        'next_text'                  => __('Next', 'textdomain'),
        'screen_reader_text' => __('Posts navigation', 'textdomain'),
]);

$links       = paginate_links($args);
$next_link = get_previous_posts_link($args['next_text']);
$prev_link = get_next_posts_link($args['prev_text']);
$check_prev = (!empty($prev_link))?$prev_link:'Previous';
$check_next = (!empty($next_link))?$next_link:'Next';
$template    = apply_filters( 'navigation_markup_template', '
<div class="container"><div class= "row"><div style="display: flex;justify-content: space-around; align-items: center;" class="paginatin d-flex justify-content-between align-items-center"><div class="col-auto">
    <button type="button" class="btn btn-outline-info" >%3$s</button>
</div>
<div class="col-auto">
    <nav class="navigation %1$s" role="navigation">
            <h2 class="screen-reader-text">%2$s</h2>
            <ul class="pagination mb-0 text-dark">
                <li class="page-item">%4$s</li>
            </ul>
    </nav>
</div>
<div class="col-auto">
   <button type="button" class="btn btn-outline-info">%5$s</button>
</div></div></div><div>', $args, $class);

echo sprintf($template, $class, $args['screen_reader_text'], $check_next, $links, $check_prev);

}

Add Some Css In Your Header :

function add_css_pagination(){
?>  
    <style type="text/css">
        span.page-numbers.current {
            background: #a8307c;
            color: white;
        }
        button.btn a {
            color: #f4f4f4;
            text-decoration: none;
        }
        button.btn.btn-outline-info a {
            color: darkslategrey;
            font-weight: 600;
        }
        button.btn.btn-outline-info {
            background: unset;
            border: 1px solid turquoise;
            color: darkslategrey;
            font-weight: 600;
        }
    </style>

 <?php
 }
 add_action('wp_head','add_css_pagination');

Screenshot:

Related Posts: