Bootstrap 4 Tutorial
BS4 Introduction BS4 Getting Started BS4 Containers BS4 Typography BS4 Grid Basics BS4 Tables BS4 Images BS4 Jumbotron BS4 Buttons BS4 Button Groups BS4 Spinners BS4 Alerts BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbars BS4 Pagination BS4 Breadcrumbs BS4 Badges BS4 Progress Bars BS4 List Groups BS4 Cards BS4 Forms BS4 Inputs BS4 Input Groups BS4 Custom Forms BS4 Carousel BS4 Modal BS4 Tooltips BS4 Popovers BS4 Toast BS4 Scrollspy BS4 Media Objects BS4 Filters BS4 Utilities Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 Grid
BS4 Grid System BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge
Bootstrap 4 Reference
JS Alert JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Tab JS Toasts JS Tooltip

Bootstrap 4 Pagination

  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • »

Pagination links indicate a series of related content exists across multiple pages.


Basic Pagination

  • Previous
  • 1
  • 2
  • 3
  • Next

To create a basic pagination, first add the .pagination class to an <ul> element.

Then add the .page-item class to each <li> element and a .page-link class to each <a> element.

Run code

Working with Icons

We can also use icons or symbols in place of text for pagination links.

  • «
  • 1
  • 2
  • 3
  • »
Run code

Pagination Active State

Add the .active class to .page-item class to highlight the current page.

  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • »
Run code

Pagination Disabled State

Use .disabled class for links that appear un-clickable.

This class uses pointer-events: none; to disable the link functionality of anchors.

  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • »
Run code

Pagination Size

Bootstrap 4 gives you option further to scaling a pagination up or down.

Add the .pagination-lg class for larger blocks or .pagination-sm class for smaller blocks.

Large Pagination:
  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • »
Default Pagination:
  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • »
Small Pagination:
  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • »
Run code

Pagination Alignment

Change the alignment of pagination with flexbox utilities.

  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • »
  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • »
  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • »
Run code

Space Between Items

Use margin utilities to add spaces between page items:

  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • »
Run code