Home Web Design CSS HTML CSS Responsive Pagination UI | Paging Design With Pure CSS

HTML CSS Responsive Pagination UI | Paging Design With Pure CSS

October 30, 2019

5790

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.

https://webdevtrick.com/wp-content/uploads/responsive-pagination-design.mp4?_=1

Live Demo

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.

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.

<!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>

<!DOCTYPE html>

<head>

<title>Responsive Flexbox Pagination</title>

</head>

<body>

<li><a href=""><span>First</span></a></li>

<li><a href=""><span>Previous</span></a></li>

</ul>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* 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;
  }  
}

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.