Introduction
This chapter demonstrates about the W3CSS Pagination if website have lots of pages pagination is most usefull and following are the concepts covered in this chapter.
- Basic Pagination
- Types of Pagination
Description
If web site have lot of web pages then user need to give the pagination. Pagination can be add by using the w3-pagination class to an <ul> element. When user will added the pagination user will get the page numbers with links. The image below demonstrates to adding the pagination.
The code below demonstrates the Basic pagination as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Pagination</h2>
<p>The w3-pagination provides pagination links:</p>
<ul class="w3-pagination">
<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><a href="#">5</a></li>
</ul>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
W3.CSS provided different types of pagination for an HTML elements those can be added in <ul> elements and following are the some types of paginations as shown below.
Pagination Arrows
In W3.CSS user can also add arrow to the pagination to add these arrows user can use HTML entities or icons from icon libraries the code below demonstrates to adding Paging Arrows as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Pagination Arrows</h2>
<p>Use HTML entities or icons from an icon library to add pagination arrows:</p>
<ul class="w3-pagination">
<li><a href="#">«</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><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Hover Color
User can add the different colors to the pagination links but when mouse moves over pagination links they get a background color instead of grey color user can give own colors by using w3-hover-color class. The code below demonstrates to give own colors as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Pagination Hover Color</h2>
<p>Move the mouse over the pagination links.</p>
<ul class="w3-pagination">
<li><a href="#" class="w3-hover-purple">«</a></li>
<li><a href="#" class="w3-hover-green">1</a></li>
<li><a href="#" class="w3-hover-red">2</a></li>
<li><a href="#" class="w3-hover-blue">3</a></li>
<li><a href="#" class="w3-hover-black">4</a></li>
<li><a href="#" class="w3-hover-orange">»</a></li>
</ul>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Bordered Pagination
User can also add the borders to the pagination links by adding the w3-border class. The code below demonstrates the bordered pagination as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Bordered Pagination</h2>
<p>Add the w3-border class to add borders to the pagination:</p>
<ul class="w3-pagination w3-border">
<li><a href="#">«</a></li>
<li><a class="w3-blue" href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Centered Pagination
User can also arrange the pagination at the center by wrap a <div> element with class="w3-center" around <ul> The code below demonstrates the Centered Pagination as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Centered Pagination</h2>
<p>To center the pagination, wrap a div element with class="w3-center" around ul:</p>
<div class="w3-center">
<ul class="w3-pagination">
<li><a href="#">«</a></li>
<li><a class="w3-blue" href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Pagination Sizing
User can get the pagination in different sizes by using the w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge, w3--xxxlarge sizes The code below demonstrates the pagination sizing as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Pagination Size</h2>
<p>Use w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge or w3-xxxlarge to change the size the pagination:</p>
<ul class="w3-pagination w3-xlarge">
<li><a href="#">«</a></li>
<li><a class="w3-blue" href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- Pagination Arrows
- Hover Color
- Bordered Pagination
- Centered Pagination
- Pagination Sizing
Key Points
- User can get the pagination in different sizes.
- Default background color of pagination is grey color.
- User can get the arrows from icon libraries.