.docs-demo.columns
  .column.col-xs-12
    ul.pagination
      li.page-item
        a(href="#pagination") Prev
      li.page-item
        a(href="#pagination") 1
      li.page-item
        span ...
      li.page-item
        a(href="#pagination") 4
      li.page-item.active
        a(href="#pagination") 5
      li.page-item
        a(href="#pagination") 6
      li.page-item
        span ...
      li.page-item
        a(href="#pagination") 9
      li.page-item
        a(href="#pagination") Next
  .column.col-xs-12
    ul.pagination
      li.page-item.disabled
        a(href="#pagination" tabindex="-1") Prev
      li.page-item.active
        a(href="#pagination") 1
      li.page-item
        a(href="#pagination") 2
      li.page-item
        a(href="#pagination") 3
      li.page-item
        span ...
      li.page-item
        a(href="#pagination") 9
      li.page-item
        a(href="#pagination") Next

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

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")

-           Previous

-           1

-           2

-           3

-           ...

-           12

-           Next

.docs-demo.columns
  .column.col-12
    ul.pagination
      li.page-item.page-prev
        a(href="#pagination")
          .page-item-subtitle Previous
          .page-item-title.h5 Getting started
      li.page-item.page-next
        a(href="#pagination")
          .page-item-subtitle Next
          .page-item-title.h5 Layout

p You could use previous and next pagination to navigate. 

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")

-           
            
Previous
            
Getting started

-           
            
Next
            
Layout

