Codeigniter 4 Pagination is working, however, my bootstrap 4 template for pagination is not

Question

I am using CI4. I have successfully implemented pagination. I have 9 posts and have used '3' to paginate and therefore 3 pages. Everything works well but the css is terrible. Here is a pict of the pagination. Not the page count which is correct.

I therefore was to add boostrap 4 css to CI's pagination. When I add boostrap 4's pagination, it only show 1 page. The css is in bs4 formatting but the page just shows '1'. Here is a pict:

This is my controller:

class Post extends BaseController
{

function __construct(){
    $this->PostModel        = new \App\Models\PostModel;    
    $this->CategoryModel    = new \App\Models\CategoryModel;
}

function index(){
    $post_category_id = null;
    $category_is_published = 1;
    $post_is_published = 1; 
    $pagination = 1;  // this is just to tell the model to return $this instead of the results.
    $this->data['posts']    = $this->PostModel->getPostsByCategory($post_category_id, 
                              $category_is_published, $post_is_published, $pagination )->paginate(3);
    $this->data['pager']    = $this->PostModel->pager;
    return view('Post/post_index', $this->data);
}

}//end controller

This is my view file (I have shortened it, of course). $pager->links() will display the right number of pages but when I add the bootstrap 4 template, like below, it only displays one page.

<?php foreach ($posts as $post) :  ?>
    <p class="card-text"> <?php echo word_limiter($post->post_body, 30); ?></p>
<?php endforeach; ?>
<?= $pager->links('bootstrap', 'bootstrap4_pagination'); ?>

and this is my bootstrap4_pagination template;

<?php $pager->setSurroundCount(4); ?>
<nav>
<ul class="pagination">
    <?php if ($pager->hasPrevious()) { ?>
        <li class="page-item">
             <a href="<?= $pager->getFirst() ?>" aria-label="First" class="page-link">
                <span aria-hidden="true">First</span>
            </a>
        </li>
        <li class="page-item">
            <a href="<?= $pager->getPrevious() ?>" class="page-link" aria-label="Previous">
                <span>&laquo;</span>
            </a>
        </li>
    <?php } ?>

    <?php 
        foreach ($pager->links() as $link) { 
            $activeclass = $link['active']?'active':'';
    ?>
        <li class="page-item <?= $activeclass ?>">
            <a href="<?= $link['uri'] ?>" class="page-link">
                <?= $link['title'] ?>
            </a>
        </li>
    <?php } ?>

    <?php if ($pager->hasNext()) { ?>
        <li class="page-item">
            <a href="<?= $pager->getNext() ?>" aria-label="Next" class="page-link">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
        <li class="page-item">
             <a href="<?= $pager->getLast() ?>" aria-label="Last" class="page-link">
                <span aria-hidden="true">Last</span>
            </a>
        </li>
    <?php } ?>
</ul>
</nav>

Answer 1

You've specified that you want to use the bootstrap group:

<?= $pager->links('bootstrap', 'bootstrap4_pagination'); ?>

But you're not creating a bootstrap group:

$this->data['posts'] = $this->PostModel->getPostsByCategory($post_category_id, $category_is_published, $post_is_published, $pagination )->paginate(3);

This should be:

$this->data['posts'] = $this->PostModel->getPostsByCategory($post_category_id, $category_is_published, $post_is_published, $pagination )->paginate(3, 'bootstrap');

Alternatively you could leave out the group and replace bootstrap with default:

<?= $pager->links('default', 'bootstrap4_pagination'); ?>