Materialize CSS Pagination

by Online Tutorials Library July 14, 2022

Materialize CSS Pagination

Pagination is used to split out your long pages into shorter, easier to understand blocks. It is used to link the small pages on a single home page.

The pagination class is used to add pagination in Materialize CSS.

pagination: It is used to set the ul element as a pagination component.

Example

  <html>     <head>        <title>The Materialize Pagination Example</title>        <meta name = “viewport” content = “width = device-width, initial-scale = 1”>              <link rel = “stylesheet”           href=”https://fonts.googleapis.com/icon?family=Material+Icons”>        <link rel = “stylesheet”           href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css”>        <script type = “text/javascript”           src = “https://code.jquery.com/jquery-2.1.1.min.js”></script>        <script src = “https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js”>        </script>     </head>          <body class = “container”>         <div class = “row” style = “width:560px;”>           <div class = “col s12 m12 l12” >              <h5>Materialize Pagination Example</h5>              <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=”#!”>5</a></li>                 <li class = “waves-effect”><a href=”#!”>                    <i class = “material-icons”>chevron_right</i></a></li>              </ul>           </div>        </div>           </body>    </html>  

Test it Now

Output:

Next TopicMaterialize CSS Preloader

Materialize CSS Pagination

Materialize CSS Pagination

Example

Sticky Notes for Ubuntu

Azure Portal Overview

You may also like