Pagination

• Posted: March 18, 2016
• / By: Magda
• / In:

To add pagination, use the simple HTML markup:

HTML markup

CSS

<div class="ct-pagination pagination-centered"> <ul> <li class="pull-left"><a href="#"><i class="fa fa-caret-left"></i> prev page</a></li> <li class="ct-pagination--numbers"><a href="#">1</a></li> <li class="active ct-pagination--numbers"><a href="#">2</a></li> <li class="ct-pagination--numbers"><a href="#">3</a></li> <li class="disabled ct-pagination--numbers"><a href="#">...</a></li> <li class="ct-pagination--numbers"><a href="#">12</a></li> <li class="pull-right"><a href="#">next page <i class="fa fa-caret-right"></i></a></li> </ul> </div>

1 2 3 4 5 6 7 8 9 10 11

<div class="ct-pagination pagination-centered">     <ul>         <li class="pull-left"><a href="#"><i class="fa fa-caret-left"></i> prev page</a></li>         <li class="ct-pagination--numbers"><a href="#">1</a></li>         <li class="active ct-pagination--numbers"><a href="#">2</a></li>         <li class="ct-pagination--numbers"><a href="#">3</a></li>         <li class="disabled ct-pagination--numbers"><a href="#">...</a></li>         <li class="ct-pagination--numbers"><a href="#">12</a></li>         <li class="pull-right"><a href="#">next page <i class="fa fa-caret-right"></i></a></li>     </ul> </div>

Screenshot

Pagination