PayPal GitHub

## SPECTRE

DOCS
Getting started

- Installation
- Custom version
- Browser support
- What's new

Elements

- Typography
- Tables
- Buttons
- Forms
- Icons.css
- Labels
- Code
- Media

Layout

- Flexbox grid
- Responsive
- Hero
- Navbar

Components

- Accordions
- Avatars
- Badges
- Bars
- Breadcrumbs
- Cards
- Chips
- Empty states
- Menu
- Modals
- Nav
- Pagination
- Panels
- Popovers
- Steps
- Tabs
- Tiles
- Toasts
- Tooltips

Utilities

- Colors
- Cursors
- Display
- Divider
- Loading
- Position
- Shapes
- Text

Experimentals

- 360-Degree Viewer
- Autocomplete
- Calendars
- Carousels
- Comparison sliders
- Filters
- Meters
- Off-canvas
- Parallax
- Progress
- Sliders
- Timelines

### Pagination#

- Prev
- 1
- ...
- 4
- 5
- 6
- ...
- 9
- Next

- Prev
- 1
- 2
- 3
- ...
- 9
- Next

Add a container element with the `pagination` class. And add child elements with the `page-item` class. The `page-item` with the `active` class will be highlighted. You can add the `disabled` class to the `page-item` to have unclickable page links.

    <ul class="pagination">
      <li class="page-item disabled">
        <a href="#" tabindex="-1">Previous</a>
      </li>
      <li class="page-item active">
        <a href="#">1</a>
      </li>
      <li class="page-item">
        <a href="#">2</a>
      </li>
      <li class="page-item">
        <a href="#">3</a>
      </li>
      <li class="page-item">
        <span>...</span>
      </li>
      <li class="page-item">
        <a href="#">12</a>
      </li>
      <li class="page-item">
        <a href="#">Next</a>
      </li>
    </ul>

- Previous
  Getting started
- Next
  Layout

You could use previous and next pagination to navigate.

    <ul class="pagination">
      <li class="page-item page-prev">
        <a href="#">
          <div class="page-item-subtitle">Previous</div>
          <div class="page-item-title h5">Getting started</div>
        </a>
      </li>
      <li class="page-item page-next">
        <a href="#">
          <div class="page-item-subtitle">Next</div>
          <div class="page-item-title h5">Layout</div>
        </a>
      </li>
    </ul>

GitHub · Twitter · PayPal Donate · Patreon Sponsor · Version

Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.