Utilities Bootstrap 5Free+ CSS
Pagination example with pure CSS — a free Bootstrap 5 utility snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.
2.4k views39 downloads
gosnippets.com/preview/pagination-example-with-pure-css
Source Code
1<ul class="pagination modal-1">
2 <li><a href="#" class="prev">«</a></li>
3 <li><a href="#" class="active">1</a></li>
4 <li> <a href="#">2</a></li>
5 <li> <a href="#">3</a></li>
6 <li> <a href="#">4</a></li>
7 <li> <a href="#">5</a></li>
8 <li> <a href="#">6</a></li>
9 <li> <a href="#">7</a></li>
10 <li> <a href="#">8</a></li>
11 <li> <a href="#">9</a></li>
12 <li><a href="#" class="next">»</a></li>
13</ul><br>
14<ul class="pagination modal-2">
15 <li><a href="#" class="prev">« </a></li>
16 <li><a href="#">1</a></li>
17 <li> <a href="#">2</a></li>
18 <li> <a href="#" class="active">3</a></li>
19 <li> <a href="#">4</a></li>
20 <li> <a href="#">5</a></li>
21 <li> <a href="#">6</a></li>
22 <li> <a href="#">7</a></li>
23 <li> <a href="#">8</a></li>
24 <li> <a href="#">9</a></li>
25 <li><a href="#" class="next"> »</a></li>
26</ul><br>
27<ul class="pagination modal-3">
28 <li><a href="#" class="prev">«</a></li>
29 <li><a href="#" class="active">1</a></li>
30 <li> <a href="#">2</a></li>
31 <li> <a href="#">3</a></li>
32 <li> <a href="#">4</a></li>
33 <li> <a href="#">5</a></li>
34 <li> <a href="#">6</a></li>
35 <li> <a href="#">7</a></li>
36 <li> <a href="#">8</a></li>
37 <li> <a href="#">9</a></li>
38 <li><a href="#" class="next">»</a></li>
39</ul><br>
40<ul class="pagination modal-4">
41 <li><a href="#" class="prev">
42 <i class="fa fa-chevron-left"></i>
43 Previous
44 </a>
45 </li>
46 <li><a href="#">1</a></li>
47 <li> <a href="#">2</a></li>
48 <li> <a href="#">3</a></li>
49 <li> <a href="#">4</a></li>
50 <li> <a href="#" class="active">5</a></li>
51 <li> <a href="#">6</a></li>
52 <li> <a href="#">7</a></li>
53 <li><a href="#" class="next"> Next
54 <i class="fa fa-chevron-right"></i>
55 </a></li>
56</ul><br>
57<ul class="pagination modal-5">
58 <li><a href="#" class="prev fa fa-arrow-left"> </a></li>
59 <li> <a href="#">1</a></li>
60 <li> <a href="#">2</a></li>
61 <li> <a href="#">3</a></li>
62 <li> <a href="#">4</a></li>
63 <li><a href="#" class="active">5</a></li>
64 <li> <a href="#">6</a></li>
65 <li> <a href="#">7</a></li>
66 <li> <a href="#">8</a></li>
67 <li> <a href="#">9</a></li>
68 <li><a href="#" class="next fa fa-arrow-right"></a></li>
69</ul>
70<br>
71<ul class="pagination modal-6">
72 <li><a href="#" class="prev">«</a></li>
73 <li> <a href="#">1</a></li>
74 <li> <a href="#">2</a></li>
75 <li><a href="#" class="active">3</a></li>
76 <li> <a href="#">5</a></li>
77 <li> <a href="#">6</a></li>
78 <li><a href="#" class="next">»</a></li>
79</ul>More Utilities snippets
Auto move mouse cursor snippet
Auto move mouse cursor snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.
UtilitiesView →
Bootstrap 5 Ecommerce Product Detail Page Design snippet
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
UtilitiesView →
Bootstrap 5 Ecommerce single product page design template
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
UtilitiesView →
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.