Pager
The Pager is a separate, simpler component from Pagination — where Pagination shows a full row of numbered pages, a Pager is just two links: Previous and Next. It's the right choice when there's no meaningful page count to show, only a "go one step in either direction" action — exactly the case when a visitor is moving between individual items, like stepping from one TrailMap trail-detail page to the next.
The .pager List
A pager is an unordered list with the .pager class, holding at most two
<li> items — by default both links render side by side, centered.
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>.previous and .next: Pushing to Opposite Edges
Add .previous to the first <li> and .next to the
second to push them apart — Previous floats to the left edge of the pager and Next floats to
the right edge, instead of sitting centered next to each other.
<ul class="pager">
<li class="previous"><a href="#">← Older</a></li>
<li class="next"><a href="#">Newer →</a></li>
</ul>The .disabled State
Just like Pagination, add .disabled to an <li> to visually grey
out a direction that has nothing to go to — for example, "Previous" on the very first item in
a list.
<ul class="pager">
<li class="previous disabled"><a href="#">← Older</a></li>
<li class="next"><a href="#">Newer →</a></li>
</ul>.disabled only changes the visual
style on an <a> — it doesn't stop clicks by itself, so pair it with logic
that avoids rendering a real link when there's nowhere further to go.Worked Example: TrailMap's Previous/Next Trail Pager
A pager at the bottom of a trail-detail page, letting a visitor browse to the neighboring trail on either side without going back to the full listing.
<ul class="pager">
<li class="previous">
<a href="#">← Previous Trail: Blue Lake Trail</a>
</li>
<li class="next">
<a href="#">Next Trail: Summit Ridge Trail →</a>
</li>
</ul>d-flex and
justify-content-between combined with ordinary margin utilities.