Materialize CSS Pagination

Materialize CSS pagination is a process of splitting existing web pages into shorter blocks. Please keep in mind that every block is linked to a single page.

Steps To Create Materialize CSS Pagination

Assign .pagination to the pagination container base class. Here an unordered list is a pagination container.

General Syntax

      <ul class="pagination">
  <li class="disabled">
    <a href="#!"><i class="material-icons">chevron_left</i></a>
  </li>
  <li class="active"><a href="#!">1</a></li>
  <li class="waves-effect"><a href="#!">2</a></li>
  <li class="waves-effect">
    <a href="#!"><i class="material-icons">chevron_right</i></a>
  </li>
</ul>
    
Try it now

Source Code

          <div class="container">
  <ul class="pagination">
    <li class="disabled">
      <a href="#"><i class="material-icons">chevron_left</i></a>
    </li>
    <li class="active"><a href="#">1</a></li>
    <li class="waves-effect"><a href="#">2</a></li>
    <li class="waves-effect"><a href="#">3</a></li>
    <li class="waves-effect"><a href="#">4</a></li>
    <li class="waves-effect">
      <a href="#"><i class="material-icons">chevron_right</i></a>
    </li>
  </ul>
</div>
        
Try it now

Source Code: Output

Web Tutorials

Materialize CSS Pagination
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4