Bootstrap 5 Paging Generator
Generate paging controls quickly and wire them to your data flow for smooth list navigation.
Paging Generator
The Bootstrap 5 Paging Generator scaffolds Bootstrap pagination UI and binds it to a data source that supports paging.
What it generates
Start by looking at what the paging generator actually builds before you think about customization. This output shows the navigation structure, active state, and previous-next behavior Wappler scaffolds for you, which makes the later property choices easier to understand and adjust with confidence.
When to use it
Use this when your data source is paged (for example: a database query with paging, or an API that returns page + total information).
Open the generator
Open the Components picker, select the Generators category, then choose Bootstrap 5 Paging Generator.
Components picker opens
The Insert Child command opens the Components picker. This step matters because Components picker opens is part of the Structure panel, and understanding that context makes the next action easier to repeat in your own project.
Components picker
Use categories to find generators quickly. This step matters because Components picker is part of Components Popup Root, and understanding that context makes the next action easier to repeat in your own project.
Generators category selected
The Generators category is now selected. This step matters because Generators category selected is part of Components Popup Anchor Right, and understanding that context makes the next action easier to repeat in your own project.
Paging Generator selected
Bootstrap 5 Paging Generator is now selected and its dialog opens. This step matters because Paging Generator selected is part of Components Popup Root, and understanding that context makes the next action easier to repeat in your own project.
Generator dialog
The generator opens in a popup dialog.
Paging source
Choose where paging information comes from.
Paging Source
The paging source determines whether paging comes from a paged Server Action, a Data View, or a Flow Action.
Data Source / Data View
The data source field links paging to the provider that exposes paging state (current offset/page, total records, etc.).
Layout
Configure how the pagination looks.
Paging Size
The size variant controls the Bootstrap paging size (default, large, or small). This step matters because Paging Size is part of Popup Bootstrap5paginggenerator Form Fieldsform Field Pagingsize Input, and understanding that context makes the next action easier to repeat in your own project.
Outer / Adjacent links
Outer Links and Adjacent Links control how many page links are shown. This step matters because Outer / Adjacent links is part of Popup Bootstrap5paginggenerator Form Fieldsform Field Outerlinks Input, and understanding that context makes the next action easier to repeat in your own project.
Controls
Enable or disable first/prev/next/last controls and configure their labels.
Previous / Next
Toggle whether Previous and Next buttons are shown. This step matters because Previous / Next is part of Popup Bootstrap5paginggenerator Form Fieldsform Field Showprevnext Input, and understanding that context makes the next action easier to repeat in your own project.
First / Last
Toggle whether First and Last buttons are shown. This step matters because First / Last is part of Popup Bootstrap5paginggenerator Form Fieldsform Field Showfirstlast Input, and understanding that context makes the next action easier to repeat in your own project.
Labels
Customize labels for the paging controls. This step matters because Labels is part of Popup Bootstrap5paginggenerator Form Fieldsform Field Prevlabel Input, and understanding that context makes the next action easier to repeat in your own project.
State manager (optional)
Optionally persist paging state using a state manager.
Use State Manager
Enable this if you want paging state reflected in a state manager (useful for URL sync and persistence).
State Manager
The state manager selection defines where paging state and offset are stored. This step matters because State Manager is part of Popup Bootstrap5paginggenerator Form Fieldsform Field Statemanager Input, and understanding that context makes the next action easier to repeat in your own project.
Generate
When you’re happy with the settings, generate the pagination component.
Ok
Selecting Ok inserts the generated pagination component into the page. This step matters because Ok is part of Popup Bootstrap5paginggenerator Button Ok, and understanding that context makes the next action easier to repeat in your own project.
Cancel
Selecting Cancel closes the dialog without inserting anything. This step matters because Cancel is part of Popup Bootstrap5paginggenerator Button Cancel, and understanding that context makes the next action easier to repeat in your own project.
Next steps
Continue with other generator tours, or return to the Bootstrap tours index.