Pagination layouts
Bordered seamless, flat and spaced pagination styles
Bordered pagination
Basic example of default navigation style. All items have borders on all sides with negative margin on sides
Flat pagination
Remove borders and background color in default state by adding .pagination-flat to pagination container
Spaced pagination
Separate pagination items and add some spacing by adding .pagination-spaced to pagination container
Bordered rounded
Use .rounded-start-pill and .rounded-end-pill classes in the first and last .page-link to make them fully rounded
Flat rounded
Add .rounded-pill to all .page-link items to make buttons in flat pagination fully rounded. No extra classes required
Spaced rounded
Add .rounded-pill to all pagination buttons. Optionally use .px-0 in buttons with arrow to give them proportional size
Pagination styles
Examples of optional styles that can be created with our utility classes
Buttons with icon
Optional version with left and right pagination buttons, current page number, total pages and a link to the last page
Pagination toolbar
A simple toolbar with pagination, page and results counter. You can also use optional form controls to allow users to just to specific page
Showing 5 of 20 items
1 of 4
Custom pagination example
Custom modification of flat pagination, where active page is always centered and links to the first and last pages have smaller size
Simple pager
If you need to show a simple paging with 2 buttons only, use pagination component without .active class in .page-item container
Linked pager
Add .pagination-linked class to .pagination to give buttons a default link style with primary background in hover state
Dotted pagination
Pagination also support links without text. Use .wmin-0 to reset min link width, .rounded-pill to round links and .p-1 to give them the size
Borderless pagination
If you add .border-transparent and .mx-0 to all page links, pagination will be displayed without borders. Works with all pagination styles
With dropdown menu
Pagination items also support dropdown menu to display a list of page number ranges. Dropdown toggler can be used with text or icon
Buttons with icon
An example of a basic use of input fields in pagination, to allow users to manually enter page number. Also supports form selects
Pagination options
Sizing and alignment options
Bordered pagination
Pagination supports 2 additional sizes - small and large. To use, add .pagination-[lg|sm] class to the base .pagination container
Flat pagination
To use optional sizes in flat pagination, add .pagination-[lg|sm] class to the base .pagination.pagination-flat container
Separated pagination
To use optional sizes in spaced pagination, add .pagination-[lg|sm] class to the base .pagination.pagination-spaced container
Left alignment
Pagination is a flex container, which means you can use our flex utility classes to control alignment. By default pagination is aligned to the left
Center alignment
Use .justify-content-center utility class in .pagination container to center it horizontally. Works with all pagination styles and sizes
Right alignment
Use .justify-content-end utility class in .pagination container to align it to the right. Works with all pagination styles and sizes
