Black Friday Sale is on: Get Amazing deals on tools and resourcess

Tutorial: CSS Pagination


By Emmanuel Chinonso

Web Developer

CSS Pagination

You can create a responsive pagination using CSS.

Contrast Bootstrap UI Kit

Simple Pagination: If you have a website with lots of pages, you may wish to add some sort of pagination to each page.

CSS Code:

1.pagination {
2 display: inline-block;
4.pagination a {
5 color: black;
6 float: left;
7 padding: 8px 16px;
8 text-decoration: none;

Highlight the current page with an a .active class, and use the :hover selector to change the color of each page link when moving the mouse over them:

CSS Code:

1.pagination a.active {
2 background-color: #4CAF50;
3 color: white;
6.pagination a:hover:not(.active) {background-color: #ddd;}

Rounded Active and Hoverable Buttons: Add the border-radius property if you want a rounded "active" and "hover" button:

CSS Code:

1.pagination a {
2 border-radius: 5px;
5.pagination a.active {
6 border-radius: 5px;

Hoverable Transition Effect

Add the transition property to the page links to create a transition effect on hover:

CSS Code:

1.pagination a {
2 transition: background-color .3s;
5Another variation of pagination is so-called "breadcrumbs":
6CSS Code:
7ul.breadcrumb {
8 padding: 8px 16px;
9 list-style: none;
10 background-color: #eee;
13ul.breadcrumb li {display: inline;}
15ul.breadcrumb li+li:before {
16 padding: 8px;
17 color: black;
18 content: "/\00a0";

CSS Box Sizing: The CSS box-sizing property allows us to include the padding and border in an element's total width and height. Without the CSS box-sizing Property By default, the width and height of an element is calculated like this: width + padding + border = actual width of an element height + padding + border = actual height of an element

This means: When you set the width/height of an element, the element often appears bigger than you have set (because the element's border and padding are added to the element's specified width/height). With the CSS box-sizing property The box-sizing property allows us to include the padding and border in an element's total width and height. If you set box-sizing: border-box; on an element, padding and border are included in the width and height:

CSS Code:

1.div1 {
2 width: 300px;
3 height: 100px;
4 border: 1px solid blue;
5 box-sizing: border-box;
7.div2 {
8 width: 300px;
9 height: 100px;
10 padding: 50px;
11 border: 1px solid red;
12 box-sizing: border-box;

Since the result of using the box-sizing: border-box; is so much better, many developers want all elements on their pages to work this way.

The code below ensures that all elements are sized in this more intuitive way. Many browsers already use box-sizing: border-box; for many form elements (but not all - which is why inputs and text areas look different at width: 100%;). Applying this to all elements is safe and wise.

CSS Code:

1* {
2 box-sizing: border-box;

Contrast Bootstrap UI Kit

Create Stunning websites and web apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Try contrast pro


Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Related Posts