How we can create a responsive pagination design using only HTML and CSS? Solution: See this HTML CSS Responsive Pagination UI, Paging Design With Pure CSS.
Previously I have shared some types of pagination design, but it has responsive design and they don’t have. When we have too much content on our website and we can’t show all on one page, then we use the paging method. Basically, paging divides all website contents into multiple pages and created a good user experience.
Today you will learn to create Paging Design With Pure CSS. Basically, there is a pagination design with 1 to 10Â numbers, next/previous buttons, and first/last buttons. And the main feature of this design is responsive, it will fit on every screen size like large and small. On the small screen, only the current or selected number will visible in the pagination bar.
So, Today I am sharing HTML CSS Responsive Pagination UI. There I have used pure HTML and CSS for creating this design, without JS or any other framework. This is only a prototype or UI design, you have to integrate with backend for use this. And this will be best practise for you of HTML CSS, you can use in on your project.
If you are thinking now how this responsive pagination actually is, then see the preview given below.
Preview Paging Design With Pure CSS
See this video preview to getting an idea of how this pagination UI looks like.
Now you can see this visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
HTML CSS Responsive Pagination UI Source Code
Before sharing source code, let’s talk about it. First, I have created a main div and placed a list inside it using HTML <ul> & <li> tags. And placed an active class in a single list item for showing selected number. Total I have created 14 list items, 10 for 1 to 10 numbers and the other four for next/ previous, first/last.
Now using CSS I have placed all the items in the right place, as you can see in the preview. There I have used the font-awesome library for placing the icons and linked in the HTML file. In the small screen size, only active page number, and icons will visible and others will hide. For creating the responsive design I have used CSS @media query (info).
Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this prototype design you have to create only 2 files, one for HTML and one for CSS. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com )--> <html lang="en" > <head> <meta charset="UTF-8"> <title>Responsive Flexbox Pagination</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <ul class="pagination" aria-label="Pagination"> <li><a href=""><span>First</span></a></li> <li><a href=""><span>Previous</span></a></li> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li ><a href="">4</a></li> <li class="active"><a href="">5</a></li> <li><a href="">6</a></li> <li><a href="">7</a></li> <li><a href="">8</a></li> <li><a href="">9</a></li> <li><a href="">10</a></li> <li><a href=""><span>Next</span></a></li> <li><a href=""><span>Last</span></a></li> </ul> </div> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ html { overflow-y: scroll; box-sizing: border-box; font-size: 100%; line-height: 1.4236; font-family: 'Roboto', sans-serif; background-color: #f3f3f3; color: #212121; } *, *:before, *:after { box-sizing: inherit; } body { font-size: 1.382rem; } .wrapper { display: flex; flex-direction: column; min-height: 50vh; box-shadow: 0px .5vh 5px 0px rgba(0,0,0,.25); padding:1em; background-color:#fff; max-width: 53rem; margin: 15% auto; justify-content: center; align-items: center; } .pagination, .pagination li a { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .pagination li { background-color: #fa824e; } .pagination a { font-weight: 300; padding-top: 1px; text-decoration:none; border: 1px solid rgba(0,0,0,.25); border-left-width: 0; min-width:44px; min-height:44px; color: rgba(255,255,255,.85); box-shadow: inset 0px 1px 0px 0px rgba(255,255,255,.35); } .pagination li:not([class*="active"]) a:hover { background-color: rgba(255,255,255,.2); border-top-color: rgba(0,0,0,.35); border-bottom-color: rgba(0,0,0,.5); } .pagination li:not([class*="active"]) a:focus, .pagination li:not([class*="active"]) a:active {; box-shadow: 0px 0px 10px 1px rgba(0,0,0,.25); border-left-width:1px; } .pagination li:first-of-type a { border-left-width: 1px; } .pagination li:first-of-type span, .pagination li:last-of-type span, .pagination li:nth-of-type(2) span, .pagination li:nth-last-of-type(2) span { position: absolute; top: -9999px; left: -9999px; } .pagination li:first-child a::before, .pagination li:last-child a::after, .pagination li:nth-of-type(2) a::before, .pagination li:nth-last-of-type(2) a::after { display: inline-block; font-family: Fontawesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translate(0, 0); transform: translate(0, 0); } .pagination li:first-child a::before, .pagination li:last-child a::after { content: "\f100"; } .pagination li:nth-of-type(2) a::before, .pagination li:nth-last-of-type(2) a::after { content: "\f104"; } .pagination li:last-child a::after, .pagination li:nth-last-of-type(2) a::after { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .pagination li.active a { padding-top:.25em; color: rgba(255,255,255,1); background-color: rgba(255,255,255,.15); box-shadow: inset 0px 2px 1px 0px rgba(0,0,0,.25); cursor: default; pointer-events: none; } @media only screen and ( max-width: 1025px ) { .pagination li:first-child, .pagination li:last-child { position: absolute; top: -9999px; left: -9999px; } .pagination li:nth-of-type(2) a { border-left-width: 1px; } } @media only screen and ( max-width: 641px ) { .pagination li { position: absolute; top: -9999px; left: -9999px; } .pagination li.active, .pagination li:first-of-type, .pagination li:last-of-type, .pagination li:nth-of-type(2), .pagination li:nth-last-of-type(2){ position: initial; top: initial; left: initial; } .pagination li:nth-of-type(2) a { border-left-width: 0; } } @media only screen and ( max-width: 481px ) { h1 { font-size: 1.35em !important; } .pagination li:first-child, .pagination li:last-child { position: absolute; top: -9999px; left: -9999px; } .pagination li:nth-of-type(2) a { border-left-width: 1px; } } @media only screen and ( max-width: 241px ) { .pagination li { width: 50%;} .pagination li.active { order: 2; width: 100%; border-left-width: 1px; } } |
That’s It. Now you have successfully created HTML CSS Responsive Pagination UI, Paging Design With Pure CSS. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
Oww superb