• 01666-222229
  • info@practicise.com
  • Sircl Tech Pvt. Ltd, Red Light Chowk, Sirsa
Search
Close this search box.
Course Content
Bootstrap
0/4
Introduction
00:00
how to use bootstrap 5?
00:00
Containers
00:00
Grid System
00:00
Typography
0/4
Introduction
00:00
h1-h6 tag, display headings and small tag
00:00
HTML Elements
00:00
Bootstrap typography classes
00:00
Colors
0/3
Introduction
00:00
Text Colors
00:00
Background colors
00:00
Tables
0/5
Introduction
00:00
Tables
00:00
Black and Dark Tables
00:00
Contextual Classes
00:00
Small and Responsive Table
00:00
Images
0/2
Introduction
00:00
Aligning Images
00:00
Bootstrap 5 Alerts
0/1
Alerts
00:00
Buttons
0/2
Buttons
00:00
Button Groups
00:00
Badges
0/2
Badges
00:00
Badge Sizing and Badge use with JavaScript
00:00
Progress Bars
0/1
Progress Bars
Spinners
0/1
Spinners
Pagination
0/1
Pagination
List Groups
0/1
List Groups
Bootstrap
About Lesson

Basic Pagination

In Bootstrap, “pagination” refers to a set of links used to navigate between different pages of content on a website.

To create a basic pagination, add the .pagination class to an <ul> element. Then add the .page-item to each <li> element and a .page-link class to each link inside <li>:

Example:

HTML
<nav>
    <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="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>
</nav>

Output:

Active State

The .active class is used to “highlight” the current page:

Example:

HTML
<nav>
    <ul class="pagination">
        <li class="page-item"><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 active"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>
</nav>

Output:

Disabled State

The .disabled class is used for un-clickable links:

Example:

HTML
<ul class="pagination">
  <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="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

Output:

Pagination Sizing

The blocks of pagination can also be sized larger or smaller.

You can use class .pagination pagination-lg for large block:

Example:

HTML
<nav>
    <ul class="pagination pagination-lg">
        <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>
</nav>

Output:

You can use class .pagination pagination-sm for small block:

Example:

HTML
<nav>
    <ul class="pagination pagination-sm">
        <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>
</nav>

Output:

Pagination Alignment

Use utility classes to change the alignment of the pagination:

Example:

HTML
  <nav>
        <!-- Alignment Left (Default) -->
        <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>
        <!-- Alignment Center -->
         <ul class="pagination justify-content-center">
            <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>
        <!-- Alignment Right -->
        <ul class="pagination justify-content-end">
            <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>
    </nav>

Output:

Breadcrumbs

In Bootstrap, “breadcrumbs(Another form for pagination)” is a navigation element that displays a user’s current location within a website’s hierarchy, essentially showing the path they took to reach the current page, while “pagination” is a system for dividing content into distinct pages. 

Example:

HTML
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
</nav>

Output:

Previous
Next