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

Materialize CSS Pagination

Steps To Create Materialize CSS Pagination

Web Tutorials