Bootstrap Pagination
17 April 2025 | Category: Bootstrap
Bootstrap Tutorial: Create Stylish Pagination
In this Bootstrap tutorial, you’ll learn how to use Bootstrap’s Pagination classes to create navigation for multi-page content. Pagination helps users browse lists or pages, and we’ll pair it with images for a lively look.
What You’ll Learn
- Creating a basic pagination
- Using active and disabled states
- Adjusting pagination sizes
- Combining pagination 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 Pagination
Bootstrap Pagination uses the pagination class with page-item and page-link to create a navigation bar for pages. It’s ideal for tables, search results, or galleries, with options for styling and states.
Assume Bootstrap CSS is included in your project (we’ll skip the <link> tag as requested).
Step 2: Create a Basic Pagination
Start with a simple pagination for navigating pages. Use this code:
<div class="container">
<h3>Basic Pagination</h3>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
</div>Explanation:
container: Centers and constrains content.pagination: Styles the list as a pagination bar.page-item: Defines each page link.page-link: Styles the clickable link.
This creates a row of numbered links for navigation.
Step 3: Add Active and Disabled States
Highlight the current page and disable unavailable ones. Try this:
<div class="container">
<h3>Active and Disabled Pagination</h3>
<ul class="pagination">
<li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</div>Explanation:
disabled: Grays out the “Previous” link, making it unclickable.active: Highlights the current page (1) with a blue background.page-link: Ensures consistent link styling.
This shows the current page and disables unavailable navigation.
Step 4: Adjust Pagination Sizes
Control size with pagination-lg or pagination-sm. Add this:
<div class="container">
<h3>Pagination Sizes</h3>
<ul class="pagination pagination-lg mb-3">
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
<ul class="pagination pagination-sm">
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
</div>Explanation:
pagination-lg: Makes a larger pagination bar.pagination-sm: Makes a smaller pagination bar.mb-3: Adds margin-bottom for spacing.
This shows large and small pagination options.
Step 5: Combine with an Image
Pair pagination with a dummy image for a gallery-like context. Try this:
<div class="container">
<div class="row">
<div class="col-8">
<h3>Image Gallery</h3>
<p>Browse through our collection.</p>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-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:
rowandcol-8,col-4: Splits content into pagination/text (8 units) and image (4 units).paginationwithactive: Highlights the current page.- Uses a 200×150 green image for vibrancy.
The image suggests pagination for a gallery.
Final Code
Here’s a combined example with varied pagination and an image:
<div class="container">
<div class="row mb-3">
<div class="col-12">
<h3>Page Navigation</h3>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
</div>
</div>
<div class="row mb-3">
<div class="col-12">
<h3>Large Pagination</h3>
<ul class="pagination pagination-lg">
<li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-7">
<h3>Search Results</h3>
<p>Navigate through results.</p>
<ul class="pagination pagination-sm">
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</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 row with a standard pagination bar (1, 2 active, 3).
- A row with a large pagination bar (Previous disabled, 1, 2, Next).
- A two-column section with a small pagination bar (1, 2 active, 3), text, and a red image (250×150).
- All pagination bars are responsive, adjusting for mobile, with colorful images for a vibrant look.
Next Steps
- Check the Bootstrap Pagination Docs for more options.
- Try
justify-content-centerto center pagination. - Use pagination with Bootstrap tables for data navigation.
Conclusion
You’ve mastered Bootstrap Pagination! With classes like pagination, page-item, and pagination-lg, plus striking images, you’ve created stylish navigation bars. Keep experimenting to enhance your webpages.