Bootstrap 5-Pagination


If you have a web site with lots of pages, you may wish to add some sort of pagination to each page.

Basic Pagination

<html lang = "en">
<head>
<title> Bootstrap 5 Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container">
<h4> Basic Pagination </h4>
<ul class = "pagination">
<li class = "page-item"> <a class = "page-link" href = "#"> Before </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 = "#"> 4 </a> </li>
<li class = "page-item"> <a class = "page-link" href = "#"> 5 </a> </li>
<li class = "page-item"> <a class = "page-link" href = "#"> After </a> </li>
</ul>
</div>
</body>
</html>


Output

 Bootstrap 5 Example

Basic Pagination


Active Pagination

<html lang = "en">
<head>
<title> Bootstrap 5 Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container">
<h4> Basic Pagination </h4>
<ul class = "pagination">
<li class = "page-item"> <a class = "page-link" href = "#"> Before </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 = "#"> 4 </a> </li>
<li class = "page-item active"> <a class = "page-link" href = "#"> 5 </a> </li>
<li class = "page-item"> <a class = "page-link" href = "#"> After </a> </li>
</ul>
</div>
</body>
</html>

Output

Bootstrap 5 Example

Basic Pagination


Disabled-Pagination

<html lang = "en">
<head>
<title> Bootstrap 5 Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container">
<h4> Basic Pagination </h4>
<ul class = "pagination">
<li class = "page-item"> <a class = "page-link" href = "#"> Before </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 disabled"> <a class = "page-link" href = "#"> 4 </a> </li>
<li class = "page-item disabled"> <a class = "page-link" href = "#"> 5 </a> </li>
<li class = "page-item"> <a class = "page-link" href = "#"> After </a> </li>
</ul>
</div>
</body>
</html>

Output

Bootstrap 5 Example

Basic Pagination


Breadcrumb pagination

Bootstrap5 pagination function uses the "breadcrumb" class inside of the <ul> tag. The bootstrap uses list tag such as a <li> and <a> for linking pages. The list tags such as a

  • use the "breadcrumb-item" class.

    <html lang = "en">
    <head>
    <title> Bootstrap 5 Example </title>
    <meta name = "viewport" content = "width=device-width, initial-scale = 1">
    <link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
    </script>
    </head>
    <body>
    <div class="container">
    <h4> Basic Pagination </h4>
    <ul class = "breadcrumb">
    <li class = "breadcrumb-item"> <a href = "#"> Red </a> </li>
    <li class = "breadcrumb-item"> <a href = "#"> Blue </a> </li>
    <li class = "breadcrumb-item"> <a href = "#"> Black </a> </li>
    <li class = "breadcrumb-item"> <a href = "#"> Green </a> </li>
    <li class = "breadcrumb-item"> <a href = "#"> Orange </a> </li>
    <li class = "breadcrumb-item"> <a href = "#"> yellow </a> </li>
    </ul>
    </div>
    </body>
    </html>

    Output

    html lang = "en"> Bootstrap 5 Example

    Basic Pagination