Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Create a responsive pagination with CSS

CSS Web Development Front End Technology

Responsive pagination is a navigation component that adapts to different screen sizes while maintaining usability. This technique uses CSS to create pagination links that automatically adjust their layout and appearance across devices.

Syntax

.pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.pagination a {
    padding: value;
    margin: value;
    text-decoration: none;
    border: value;
}

@media (max-width: breakpoint) {
    /* Responsive styles */
}

Example: Basic Responsive Pagination

The following example creates a responsive pagination component that adapts to different screen sizes −

<!DOCTYPE html>
<html>
<head>
<style>
    .pagination {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin: 20px 0;
        gap: 5px;
    }
    
    .pagination a {
        color: #007bff;
        padding: 10px 15px;
        text-decoration: none;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        transition: all 0.3s ease;
        min-width: 40px;
        text-align: center;
        background-color: #fff;
    }
    
    .pagination a:hover {
        background-color: #e9ecef;
        border-color: #adb5bd;
    }
    
    .pagination a.active {
        background-color: #007bff;
        color: white;
        border-color: #007bff;
    }
    
    @media (max-width: 600px) {
        .pagination a {
            padding: 8px 12px;
            font-size: 14px;
        }
        
        .pagination a.page-number {
            display: none;
        }
        
        .pagination a.page-number.active,
        .pagination a.page-number:first-of-type,
        .pagination a.page-number:last-of-type {
            display: inline-block;
        }
    }
</style>
</head>
<body>
    <h2>Responsive Pagination Example</h2>
    <div class="pagination">
        <a href="#">&laquo; Previous</a>
        <a href="#" class="page-number">1</a>
        <a href="#" class="page-number active">2</a>
        <a href="#" class="page-number">3</a>
        <a href="#" class="page-number">4</a>
        <a href="#" class="page-number">5</a>
        <a href="#">Next &raquo;</a>
    </div>
</body>
</html>

A horizontal pagination component with Previous/Next buttons and numbered pages 1-5. Page 2 is highlighted in blue. On smaller screens, only the active page and first/last pages remain visible while others are hidden.

Key Features

The responsive pagination includes several important features −

  • Flexbox Layout: Uses display: flex with flex-wrap for automatic wrapping
  • Media Queries: Hides non-essential page numbers on smaller screens
  • Hover Effects: Smooth transitions for better user interaction
  • Active State: Visual indication of the current page

Conclusion

Responsive pagination enhances user experience by adapting to different screen sizes. Using flexbox and media queries ensures the navigation remains functional and visually appealing across all devices.

Updated on: 2026-03-15T12:57:53+05:30

579 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements