Using the Pagination component

Let's continue adding some more components to our templates by learning how to use the Pagination component. For our blog project, we want to use the Pager version of the component. Open up index.ejs and insert the following code after the last Card component in our blog feed:

<nav> 
  <ul class="pager m-t-3"> 
    <li class="pager-prev"><a href="#">Older Posts</a></li> 
    <li class="pager-next disabled"><a href="#">Newer Posts</a></li> 
  </ul> 
</nav> 

The Pager is wrapped in an HTML5 <nav> tag and uses an unordered list as its base:

  • The <ul> tag should have a class of .pager added to it.
  • The first list item in the group should have a class of .pager-prev on it.
  • The second list item should have a class of .pager-next on it. In this ...

Get Learning Bootstrap 4 - Second Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.