Let's have fun

Let's have fun

Pagination

Info

If you have a website with many pages, you may want to add some type of pagination to each page. Below is a flexbox-based pagination and a so-called breadcrumb.

Pagination

Left

pagination
justify-content-start
page-item
page-link
first
active
last
<ul class="pagination justify-content-start">
  <li class="page-item"><a class="page-link first" href=""></a></li>
  <li class="page-item active"><a class="page-link" href="">1</a></li>
  <li class="page-item"><a class="page-link" href="#"></a></li>
  <li class="page-item"><a class="page-link" href="#"></a></li>
  <li class="page-item"><a class="page-link last" href=""></a></li>
</ul>

Center

justify-content-center
<ul class="pagination justify-content-center">
  <li class="page-item"><a class="page-link first" href=""></a></li>
  <li class="page-item active"><a class="page-link" href="">1</a></li>
  <li class="page-item"><a class="page-link" href="#"></a></li>
  <li class="page-item"><a class="page-link" href="#"></a></li>
  <li class="page-item"><a class="page-link last" href=""></a></li>
</ul>

Right

justify-content-end
<ul class="pagination justify-content-end">
  <li class="page-item"><a class="page-link first" href=""></a></li>
  <li class="page-item active"><a class="page-link" href="">1</a></li>
  <li class="page-item"><a class="page-link" href="#"></a></li>
  <li class="page-item"><a class="page-link" href="#"></a></li>
  <li class="page-item"><a class="page-link last" href=""></a></li>
</ul>

Breadcrumb

breadcrumb
<ul class="breadcrumb">
  <li><a href="">pagina 1</a></li>
  <li><a href="">pagina 3</a></li>
  <li>pagina 4</li>
</ul>        

Colors

Pagination

Black
pagination pag-black
<ul class="pagination pag-black">
White
pagination pag-white
<ul class="pagination pag-white">
Gray
pagination pag-gray
<ul class="pagination pag-gray">
Blue
pagination pag-blue
<ul class="pagination pag-blue">
Green
pagination pag-green
<ul class="pagination pag-green">
Teal
pagination pag-teal
<ul class="pagination pag-teal">
Red
pagination pag-red
<ul class="pagination pag-red">
Yellow
pagination pag-yellow
<ul class="pagination pag-yellow">
Orange
pagination pag-orange
<ul class="pagination pag-orange">
Brown
pagination pag-brown
<ul class="pagination pag-brown">
Purple
pagination pag-purple
<ul class="pagination pag-purple">
Pink
pagination pag-pink
<ul class="pagination pag-pink">

Breadcrumb

Black
breadcrumb pag-black
<ul class="breadcrumb pag-black">
White
breadcrumb pag-white
<ul class="breadcrumb pag-white">
Gray
breadcrumb pag-gray
<ul class="breadcrumb pag-gray">
Blue
breadcrumb pag-blue
<ul class="breadcrumb pag-blue">
Green
breadcrumb pag-green
<ul class="breadcrumb pag-green">
Teal
breadcrumb pag-teal
<ul class="breadcrumb pag-teal">
Yellow
breadcrumb pag-yellow
<ul class="breadcrumb pag-yellow">
Orange
breadcrumb pag-orange
<ul class="breadcrumb pag-orange">
Brown
breadcrumb pag-brown
<ul class="breadcrumb pag-brown">
Purple
breadcrumb pag-purple
<ul class="breadcrumb pag-purple">
Pink
breadcrumb pag-pink
<ul class="breadcrumb pag-pink">