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
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>
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>
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
<ul class="breadcrumb"> <li><a href="">pagina 1</a></li> <li><a href="">pagina 3</a></li> <li>pagina 4</li> </ul>
breadcrumb pag-black
<ul class="breadcrumb pag-black">
breadcrumb pag-white
<ul class="breadcrumb pag-white">
breadcrumb pag-gray
<ul class="breadcrumb pag-gray">
breadcrumb pag-blue
<ul class="breadcrumb pag-blue">
breadcrumb pag-green
<ul class="breadcrumb pag-green">
breadcrumb pag-teal
<ul class="breadcrumb pag-teal">
breadcrumb pag-yellow
<ul class="breadcrumb pag-yellow">
breadcrumb pag-orange
<ul class="breadcrumb pag-orange">
breadcrumb pag-brown
<ul class="breadcrumb pag-brown">
breadcrumb pag-purple
<ul class="breadcrumb pag-purple">
breadcrumb pag-pink
<ul class="breadcrumb pag-pink">