Materialize CSS Pagination

Materialize CSS Pagination

Materialize CSS pagination is a process of splitting existing web pages into shorter blocks & every block is linked to a single page.

Steps To create Materialize CSS pagination

  • Assign the .pagination class to the pagination container i.e <ul> base class.
    Pagination Container
      
        <ul class="pagination"></ul> 
     
  • Placed all the paginated item i.e unordered list item(<li>) inside the pagination container i.e <ul>.
    Pagination Item
          
    <ul class="pagination">
      <li class="waves-effect">
            <a href="#!">Page Link</a>
      </li>
    </ul>
     

General Syntax

<ul class="pagination">
  <li class="waves-effect">
        <a href="#!">Page Link</a>
  </li>
</ul>    
Try It Now

Source Code

Download
<div class="row">
  <div class="col s12">
    <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>
  <!--/column-->
</div>
<!--/row-->    
Try it yourself

Source Code : Output

Pagination: Active

To create active pagination item, use the .active class to the direct child element i.e <li> of pagination container element class base class.

General Syntax

<ul class="pagination">
   <li class="active"></li>
</ul>    
Try It Now

Source Code

Download
<div class="row">
  <div class="col s12">
    <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>
  <!--/column-->
</div>
<!--/row-->    
Try it yourself

Source Code : Output

Pagination: Disabled

To create a disabled pagination item, simply assign the .disabled class to the pagination's direct child element i.e <li> element base class.

General Syntax

<ul class="pagination">
     <li class="disabled"></li>
</ul>    
Try It Now

Source Code : Output

Pagination Alignment

Pagination can be aligned in the horizontal direction along the x-axis through the text helper class. Keep in mind that, pagination is by default left aligned.

Pagination: Center Align

To align the pagination in the center of the x-axis, use the .center-align class.

General Syntax

<div class="center-align">
      <ul class="pagination"> </ul>   
</div>    
Try It Now

Source Code : Output

Pagination: Right Align

To align the pagination in the right horizontally, use the .right-align class.

General Syntax

<div class="right-align">
   <ul class="pagination"></ul>
</div>    
Try It Now

Source Code

Download
<div class="row">
  <div class="col s12 right-align">
    <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>
  <!--/column-->
</div>
<!--/row-->    
Try it yourself

Source Code : Output

Web Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS