Bootstrap Pager

17 April 2025 | Category: Bootstrap

Bootstrap Tutorial: Create Simple Pager Navigation

In this Bootstrap tutorial, you’ll learn how to create a Pager-style navigation for moving between pages using Bootstrap classes. A Pager provides simple “Previous” and “Next” links, and we’ll pair it with images for a vibrant look.

What You’ll Learn

Creating a basic Pager
Adding disabled states
Aligning Pager links
Combining Pager with images

Prerequisites

Basic knowledge of HTML
A text editor (e.g., VS Code, Notepad)
A web browser (e.g., Chrome, Firefox)

Step 1: Understand Bootstrap Pager

In Bootstrap 3, the pager class created a simple “Previous/Next” navigation. In Bootstrap 5, you can achieve this using a nav with pagination or page-link classes, styled for minimalistic page navigation.

Assume Bootstrap CSS is included in your project (we’ll skip the <link> tag as requested).

Step 2: Create a Basic Pager

Start with a simple Pager for navigating between pages. Use this code:

<div class="container">
    <h3>Basic Pager</h3>
    <ul class="nav justify-content-center">
        <li class="nav-item">
            <a class="nav-link" href="#">Previous</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Next</a>
        </li>
    </ul>
</div>

Explanation:

container: Centers and constrains content.
nav: Creates a navigation container.
justify-content-center: Centers the links.
nav-item: Defines each navigation item.
nav-link: Styles the links like a Pager.

This creates a centered “Previous/Next” navigation.

Step 3: Add Disabled State

Disable one link to show it’s unavailable. Try this:

<div class="container">
    <h3>Disabled Pager</h3>
    <ul class="nav justify-content-center">
        <li class="nav-item disabled">
            <a class="nav-link" href="#">Previous</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Next</a>
        </li>
    </ul>
</div>

Explanation:

disabled on nav-item: Grays out the “Previous” link, making it unclickable.
nav-link: Maintains consistent styling.

This indicates the “Previous” page isn’t available.

Step 4: Align Pager Links

Align Pager links to the left or right for different layouts. Use this:

<div class="container">
    <h3>Aligned Pager</h3>
    <ul class="nav justify-content-between">
        <li class="nav-item">
            <a class="nav-link" href="#">Previous</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Next</a>
        </li>
    </ul>
</div>

Explanation:

justify-content-between: Places “Previous” on the left and “Next” on the right.
nav-item and nav-link: Keep the Pager style.

This spreads the links across the container.

Step 5: Combine with an Image

Pair the Pager with a dummy image for a gallery-like context. Try this:

<div class="container">
    <div class="row">
        <div class="col-8">
            <h3>Photo Navigation</h3>
            <p>Browse through our gallery.</p>
            <ul class="nav justify-content-center">
                <li class="nav-item">
                    <a class="nav-link" href="#">Previous</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Next</a>
                </li>
            </ul>
        </div>
        <div class="col-4">
            <img src="https://placehold.co/200x150/28a745/ffffff" class="img-fluid rounded" alt="Green placeholder">
        </div>
    </div>
</div>

Explanation:

row and col-8, col-4: Splits content into Pager/text (8 units) and image (4 units).
justify-content-center: Centers the Pager links.
Uses a 200×150 green image for vibrancy.

The image suggests navigation for a photo gallery.

Final Code

Here’s a combined example with varied Pager styles and an image:

<div class="container">
    <div class="row mb-3">
        <div class="col-12">
            <h3>Simple Pager</h3>
            <ul class="nav justify-content-center">
                <li class="nav-item">
                    <a class="nav-link" href="#">Previous</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Next</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-12">
            <h3>Disabled Pager</h3>
            <ul class="nav justify-content-end">
                <li class="nav-item disabled">
                    <a class="nav-link" href="#">Previous</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Next</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-7">
            <h3>Article Navigation</h3>
            <p>Read more articles in this series.</p>
            <ul class="nav justify-content-between">
                <li class="nav-item">
                    <a class="nav-link" href="#">Previous</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Next</a>
                </li>
            </ul>
        </div>
        <div class="col-5">
            <img src="https://placehold.co/250x150/ff6b6b/ffffff" class="img-fluid rounded" alt="Red placeholder">
        </div>
    </div>
</div>

Output

Your webpage should show:

A centered Pager with “Previous” and “Next” links.
A right-aligned Pager with a disabled “Previous” link.
A two-column section with a Pager (Previous/Next spread apart), text, and a red image (250×150).
All Pagers are responsive, adjusting for mobile, with colorful images for a vibrant look.

Next Steps

Check the Bootstrap Pagination Docs for related navigation options.
Style nav-link with btn btn-primary for button-like Pagers.
Combine with Bootstrap tables for data navigation.

Conclusion

You’ve mastered Bootstrap Pager-style navigation! With classes like nav, nav-item, and nav-link, plus striking images, you’ve created simple, stylish page navigation. Keep experimenting to enhance your webpages.