Bootstrap pagination not being applied in Codeigniter 4

I'm converting a website from Codeigniter 3 to Codeigniter 4. In the Codeigniter 3 version, I have Bootstrap pagination on an element which works:

url: https://www.uvm.edu/femc/data/archive/project/1977-1985_Vermont_Sugarbush_Health_Survey/dataset/vt-1977-1985-sugarbush-survey-summary/data#

In CI4, I've added the pagination class to other elements to see if I can get it to apply but it's not applying no matter where I place it. Bootstrap is linked in the header, so I'm not sure what has changed in the CI4 version.

url: https://dev.vmc.w3.uvm.edu/xana/CI4/data/archive/project/1977-1985_Vermont_Sugarbush_Health_Survey/dataset/vt-1977-1985-sugarbush-survey-summary/data#

What am I missing here?

You seem to not only be updating CodeIgniter from version 3 to 4, but also updating Bootstrap from version 2 to 4.

In version 2, Bootstrap used display:inline to display the pagination arrows/numbers in a row, in Bootstrap 4 this changed to display:flex. You also have a custom stylesheet that sets the pagination to use display:inline and that messes up the pagination styling from Bootstrap 4.

You can change that stylesheet (multiview.css, line 19) from display:inline to display:flex but since that might mess up the styling in other places, the safest fix would probably be to change <ul class="pagination"> to <ul class="pagination d-flex"> to force it to use display:flex in just this one place.

If you also want to display the borders around the pagination items, add the page-item and page-link classes as per Bootstrap 4 documentation: https://getbootstrap.com/docs/4.0/components/pagination/

<ul class="pagination d-flex">
  <li class="prev action-pagination-update page-item">
    <a href="" class="page-link">«</a>
  </li>
  <li class="active page-item">
    <a class="page-link">
      <label for="from">From</label><input name="from" type="text" value="1"> – <label for="to">To</label><input name="to" type="text" value="54">
    </a>
  </li>
  <li class="next action-pagination-update page-item">
    <a href="" class="page-link">»</a>
  </li>
</ul>

Edit:

The same goes for your btn-group (the Table and Graph buttons on the left), for Bootstrap 4 you need to add an additional btn-secondary class (or one of the other btn-... classes) to your buttons to get the styling to show:

<div class="btn-group" data-toggle="buttons-radio">
  <a href="#grid" data-view="grid" class="btn active btn-secondary">Table</a>
  <a href="#graph" data-view="graph" class="btn btn-secondary">Graph</a>
</div>

If you're not sure what changes to make, compare the documentation examples for Bootstrap 2 and Bootstrap 4. For example for the pagination:

BS2 documentation ( https://getbootstrap.com/2.3.2/components.html#pagination ) has just the pagination class, and BS4 ( https://getbootstrap.com/docs/4.0/components/pagination/#overview ) has both the pagination and page-item and page-link classes.