YouTip- `) wrapped inside a container `
- `) to indicate the current page. This makes the link visually distinct and indicates it is the active state. * **`.disabled`**: Applied to a list item (`
- `) to make the link appear unclickable (e.g., disabling the "Prev" button when on the first page).
* **Alignment Classes**:
* `.pagination-centered`: Centers the pagination block within its parent container.
* `.pagination-right`: Aligns the pagination block to the right.
---
### Multi-Page Pagination Example
Below is a complete, self-contained HTML example demonstrating standard multi-page pagination with an active state:
```html
Bootstrap Multi-Page Pagination Example ``` --- ## Pager (Simple Pagination) If you do not need numbered page links, you can use the **Pager** component. The pager provides simple "Previous" and "Next" links, which are perfect for blogs, article navigation, or simple wizards. ### CSS Classes and Structure * **`.pager`**: Applied directly to the `- ` element to create a simple, centered link layout.
* **`.previous`**: Aligns the "Previous" link to the left side of the container.
* **`.next`**: Aligns the "Next" link to the right side of the container.
* **`.disabled`**: Can be added to any `
- ` to visually disable the link.
---
### Example 1: Standard Centered Pager
This example shows a basic, centered pager with "Previous" and "Next" links.
```html
Bootstrap Standard Pager Example ``` --- ### Example 2: Aligned Pager (Older & Newer) By adding the `.previous` and `.next` classes, you can align the links to the outer edges of their container. This is a common pattern for blog post navigation. ```htmlBootstrap Aligned Pager Example ``` --- ## Key Considerations 1. **HTML Structure**: Always wrap the list items (` - `) inside an unordered list (`
- `). For standard pagination, wrap the `
- ` in a `div` with the class `.pagination`. For the pager, apply the `.pager` class directly to the `
- `.
2. **Disabled Links**: The `.disabled` class uses `pointer-events: none` in modern browsers to prevent clicks, but it also changes the color to a muted gray. For full cross-browser compatibility, you should also handle the disabled state programmatically in your application logic to prevent action when clicked.
3. **Spacing**: The custom CSS rule `body { margin: 50px; }` used in the examples above is strictly for demonstration purposes to ensure the components do not stick to the edges of the viewport.
- ` to visually disable the link.
---
### Example 1: Standard Centered Pager
This example shows a basic, centered pager with "Previous" and "Next" links.
```html
` with the `.pagination` class.
* **`.pagination`**: The base class applied to the wrapper `
`.
* **`.active`**: Applied to a list item (`