Loading lesson path
Concept visual
Start at both ends
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: «
»
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 */
}display: flex;
to arrange the page numbers horizontally justify-content: center;
to center align them list-style: none;to remove the list bullets
<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.
Highlight the currently active page with an.active class, to indicate which page the user is on: «
»
Pagination with an .active class:.pagination li a.active {
background-color: #4CAF50;
color: white;
}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: «
»
Pagination with a .disabled class:.pagination li a.disabled {
color: #dddddd;cursor:
not-allowed;
pointer-events: none;
}