March 1Mar 1 Administrators CSS Pagination Examples CSS Pagination Learn how to create a responsive pagination using CSS. If you have a website with lots of pages, you may want to add some sort of pagination on each page. Pagination is typically a series of links, wrapped in an unordered list (<ul>). Each link represents an individual page number. In addition there are "previous" and "next" controls: « 1 2 3 4 5 » Example A simple pagination: .pagination { display: flex; justify-content: center; list-style: none; /* remove list bullets */ padding: 0px;}.pagination li a { display: block; /* let links fill the list item */ padding: 8px 12px; text-decoration: none; border: 1px solid gray; color: black; margin: 0 4px; border-radius: 5px; /* add rounded borders */} Try it Yourself » Example Explained Style the pagination container with: display: flex; to arrange the page numbers horizontally justify-content: center; to center align them list-style: none; to remove the list bullets The style the <a> elements within the <li> elements for the look of the page numbers, with properties like display, padding, text-decoration, border, background-color, color, font-size, and border-radius. Pagination With an Active Class Highlight the currently active page with an .active class, to indicate which page the user is on: « 1 2 3 4 5 » Example Pagination with an .active class: .pagination li a.active { background-color: #4CAF50; color: white;} Try it Yourself » Pagination With a Disabled Class If the user are currently on the last page, the "Next" button should be disabled. Here, we add a .disabled class, and sets the color , cursor and pointer-events properties, to make the "Next" button disabled: « 1 2 3 4 5 » Example Pagination with a .disabled class: .pagination li a.disabled { color: #dddddd; cursor: not-allowed; pointer-events: none;} Try it Yourself » Pagination Subpages Continue learning about CSS pagination: Pagination Styles - hover effects, transitions, breadcrumbs ★ +1 Sign in to track progress
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.