<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Bulma Pagination</
title
>
<
link
rel
=
'stylesheet'
href
=
<
style
>
div.columns {
margin-top: 80px;
}
.pagination {
margin-bottom: 20px;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
'container'
>
<
div
class
=
'columns is-mobile is-centered'
>
<
div
class
=
'column is-10'
>
<
nav
class
=
"pagination has-background-primary"
role
=
"navigation"
aria-label
=
"pagination"
>
<
a
class
=
"pagination-previous"
>Previous</
a
>
<
a
class
=
"pagination-next"
>Next page</
a
>
<
ul
class
=
"pagination-list"
>
<
li
>
<
a
class
=
"pagination-link"
aria-label
=
"Goto page 1"
>1</
a
>
</
li
>
<
li
>
<
a
class
=
"pagination-link"
aria-label
=
"Goto page 2"
>2</
a
>
</
li
>
<
li
>
<
a
class
=
"pagination-link"
aria-label
=
"Goto page 3"
>3</
a
>
</
li
>
<
li
>
<
span
class
=
"pagination-ellipsis"
>
…
</
span
>
</
li
>
<
li
>
<
a
class
=
"pagination-link"
aria-label
=
"Goto page 26"
>26</
a
>
</
li
>
<
li
>
<
a
class
=
"pagination-link is-current"
aria-label
=
"Page 27"
aria-current
=
"page"
>27</
a
>
</
li
>
<
li
>
<
a
class
=
"pagination-link"
aria-label
=
"Goto page 28"
>28</
a
>
</
li
>
<
li
>
<
a
class
=
"pagination-link"
aria-label
=
"Goto page 29"
>29</
a
>
</
li
>
<
li
>
<
a
class
=
"pagination-link"
aria-label
=
"Goto page 30"
>30</
a
>
</
li
>
</
ul
>
</
nav
>
<
nav
class="pagination is-centered
has-background-success"
role
=
"navigation"
aria-label
=
"pagination"
>
<
a
class
=
"pagination-previous"
>Previous</
a
>
<
a
class
=
"pagination-next"
>Next page</
a
>
<
ul
class
=
"pagination-list"
>
<
li
>
<
a
class
=
"pagination-link"
aria-label
=
"Goto page 1"
>1</
a
>
</
li
>
<
li
>
<
a
class
=
"pagination-link"
aria-label
=
"Goto page 2"
>2</
a
>
</
li
>
<
li
>
<
a
class
=
"pagination-link"
aria-label
=
"Goto page 3"
>3</
a
>
</
li
>
<
li
>
<
span
class
=
"pagination-ellipsis"
>
…
</
span
>
</
li
>
<
li
>
<
a
class
=
"pagination-link"
aria-label
=
"Goto page 26"
>26</
a
>
</
li
>
<
li
>
<
a
class
=
"pagination-link is-current"
aria-label
=
"Page 27"
aria-current
=
"page"
>27</
a
>
</
li
>
<
li
>
<
a
class
=
"pagination-link"
aria-label
=
"Goto page 28"
>28</
a
>
</
li
>
<
li
>
<
a
class
=
"pagination-link"
aria-label
=
"Goto page 29"
>29</
a
>
</
li
>
<
li
>
<
a
class
=
"pagination-link"
aria-label
=
"Goto page 30"
>30</
a
>
</
li
>
</
ul
>
</
nav
>
<
nav
class="pagination is-right
has-background-info"
role
=
"navigation"
aria-label
=
"pagination"
>
<
a
class
=
"pagination-previous"
>Previous</
a
>
<
a
class
=
"pagination-next"
>Next page</
a
>
<
ul
class
=
"pagination-list"
>
<
li
>
<
a
class
=
"pagination-link"
aria-label
=
"Goto page 1"
>1</
a
>
</
li
>
<
li
>
<
a
class
=
"pagination-link"
aria-label
=
"Goto page 2"
>2</
a
>
</
li
>
<
li
>
<
a
class
=
"pagination-link"
aria-label
=
"Goto page 3"
>3</
a
>
</
li
>
<
li
>
<
span
class
=
"pagination-ellipsis"
>
…
</
span
>
</
li
>
<
li
>
<
a
class
=
"pagination-link"
aria-label
=
"Goto page 26"
>26</
a
>
</
li
>
<
li
>
<
a
class
=
"pagination-link is-current"
aria-label
=
"Page 27"
aria-current
=
"page"
>27</
a
>
</
li
>
<
li
>
<
a
class
=
"pagination-link"
aria-label
=
"Goto page 28"
>28</
a
>
</
li
>
<
li
>
<
a
class
=
"pagination-link"
aria-label
=
"Goto page 29"
>29</
a
>
</
li
>
<
li
>
<
a
class
=
"pagination-link"
aria-label
=
"Goto page 30"
>30</
a
>
</
li
>
</
ul
>
</
nav
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>