Chat List

Show All

  • A
  • B
  • D
  • J
  • O
Chat with Khelesh

Online

  • View profile
  • Add to btn-close friends
  • Add to group
  • Block
Hi, how are you samim? 8:40 AM, Today
Hi Khalid i am good tnx how about you? 8:55 AM, Today
I am good too, thank you for your chat template 9:00 AM, Today
You are welcome 9:05 AM, Today
I am looking for your next templates 9:07 AM, Today
Ok, thank you have a good day 9:10 AM, Today
Bye, see you 9:12 AM, Today
Hi, how are you samim? 8:40 AM, Today
Hi Khalid i am good tnx how about you? 8:55 AM, Today
I am good too, thank you for your chat template 9:00 AM, Today
You are welcome 9:05 AM, Today
I am looking for your next templates 9:07 AM, Today
Ok, thank you have a good day 9:10 AM, Today
Bye, see you 9:12 AM, Today
Notications

Show All

  • SEVER STATUS
  • KK
  • SOCIAL
  • RU
  • SEVER STATUS
  • AU
  • MO
Notes

Add New Nots

Live Documentation Help & getting started
Dark Mode
Pagination

Pagination.

Make use of Bootstrap's unique Pagination styles to enhance actions in forms, dialogs, and various other elements, featuring comprehensive support for multiple sizes, states, and additional functionalities.

Pagination on Bootstrap

Pagination

Pagination

Default pagination style

<nav>
				<ul class="pagination">
					<li class="page-item page-indicator">
						<a class="page-link" href="javascript:void(0)">
							<i class="la la-angle-left"></i></a>
					</li>
					<li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
					</li>
					<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
					<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
					<li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
					<li class="page-item page-indicator">
						<a class="page-link" href="javascript:void(0)">
							<i class="la la-angle-right"></i></a>
					</li>
				</ul>
			</nav>

			<nav>
				<ul class="pagination pagination-sm">
					<li class="page-item page-indicator">
						<a class="page-link" href="javascript:void(0)">
							<i class="la la-angle-left"></i></a>
					</li>
					<li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
					</li>
					<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
					<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
					<li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
					<li class="page-item page-indicator">
						<a class="page-link" href="javascript:void(0)">
							<i class="la la-angle-right"></i></a>
					</li>
				</ul>
			</nav>

			<nav>
				<ul class="pagination pagination-xs">
					<li class="page-item page-indicator">
						<a class="page-link" href="javascript:void(0)">
							<i class="la la-angle-left"></i></a>
					</li>
					<li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
					</li>
					<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
					<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
					<li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
					<li class="page-item page-indicator">
						<a class="page-link" href="javascript:void(0)">
							<i class="la la-angle-right"></i></a>
					</li>
				</ul>
			</nav>

Pagination Gutter

add .pagination-gutter to change the style

<nav>
		<ul class="pagination pagination-gutter">
			<li class="page-item page-indicator">
				<a class="page-link" href="javascript:void(0)">
					<i class="la la-angle-left"></i></a>
			</li>
			<li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
			</li>
			<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
			<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
			<li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
			<li class="page-item page-indicator">
				<a class="page-link" href="javascript:void(0)">
					<i class="la la-angle-right"></i></a>
			</li>
		</ul>
	</nav>
	<nav>
		<ul class="pagination pagination-sm pagination-gutter">
			<li class="page-item page-indicator">
				<a class="page-link" href="javascript:void(0)">
					<i class="la la-angle-left"></i></a>
			</li>
			<li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
			</li>
			<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
			<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
			<li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
			<li class="page-item page-indicator">
				<a class="page-link" href="javascript:void(0)">
					<i class="la la-angle-right"></i></a>
			</li>
		</ul>
	</nav>
	<nav>
		<ul class="pagination pagination-xs pagination-gutter">
			<li class="page-item page-indicator">
				<a class="page-link" href="javascript:void(0)">
					<i class="la la-angle-left"></i></a>
			</li>
			<li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
			</li>
			<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
			<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
			<li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
			<li class="page-item page-indicator">
				<a class="page-link" href="javascript:void(0)">
					<i class="la la-angle-right"></i></a>
			</li>
		</ul>
	</nav>

Pagination Color

add .pagination-gutter to change the style

<nav>
	<ul class="pagination pagination-gutter pagination-primary no-bg">
		<li class="page-item page-indicator">
			<a class="page-link" href="javascript:void(0)">
				<i class="la la-angle-left"></i></a>
		</li>
		<li class="page-item "><a class="page-link" href="javascript:void(0)">1</a>
		</li>
		<li class="page-item active"><a class="page-link" href="javascript:void(0)">2</a></li>
		<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
		<li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
		<li class="page-item page-indicator">
			<a class="page-link" href="javascript:void(0)">
				<i class="la la-angle-right"></i></a>
		</li>
	</ul>
</nav>
<nav>
	<ul class="pagination pagination-gutter pagination-danger">
		<li class="page-item page-indicator">
			<a class="page-link" href="javascript:void(0)">
				<i class="la la-angle-left"></i></a>
		</li>
		<li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
		</li>
		<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
		<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
		<li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
		<li class="page-item page-indicator">
			<a class="page-link" href="javascript:void(0)">
				<i class="la la-angle-right"></i></a>
		</li>
	</ul>
</nav>
<nav>
	<ul class="pagination pagination-sm pagination-gutter pagination-info">
		<li class="page-item page-indicator">
			<a class="page-link" href="javascript:void(0)">
				<i class="la la-angle-left"></i></a>
		</li>
		<li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
		</li>
		<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
		<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
		<li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
		<li class="page-item page-indicator">
			<a class="page-link" href="javascript:void(0)">
				<i class="la la-angle-right"></i></a>
		</li>
	</ul>
</nav>
<nav>
	<ul class="pagination pagination-xs pagination-gutter  pagination-warning">
		<li class="page-item page-indicator">
			<a class="page-link" href="javascript:void(0)">
				<i class="la la-angle-left"></i></a>
		</li>
		<li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
		</li>
		<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
		<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
		<li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
		<li class="page-item page-indicator">
			<a class="page-link" href="javascript:void(0)">
				<i class="la la-angle-right"></i></a>
		</li>
	</ul>
</nav>

Pagination Circle

add .pagination-circle to change the style

 <nav>
	<ul class="pagination pagination-circle">
		<li class="page-item page-indicator">
			<a class="page-link" href="javascript:void(0)">
				<i class="la la-angle-left"></i></a>
		</li>
		<li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
		</li>
		<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
		<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
		<li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
		<li class="page-item page-indicator">
			<a class="page-link" href="javascript:void(0)">
				<i class="la la-angle-right"></i></a>
		</li>
	</ul>
</nav>
<nav>
	<ul class="pagination pagination-sm pagination-circle">
		<li class="page-item page-indicator">
			<a class="page-link" href="javascript:void(0)">
				<i class="la la-angle-left"></i></a>
		</li>
		<li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
		</li>
		<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
		<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
		<li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
		<li class="page-item page-indicator">
			<a class="page-link" href="javascript:void(0)">
				<i class="la la-angle-right"></i></a>
		</li>
	</ul>
</nav>
<nav>
	<ul class="pagination pagination-xs pagination-circle">
		<li class="page-item page-indicator">
			<a class="page-link" href="javascript:void(0)">
				<i class="la la-angle-left"></i></a>
		</li>
		<li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
		</li>
		<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
		<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
		<li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
		<li class="page-item page-indicator">
			<a class="page-link" href="javascript:void(0)">
				<i class="la la-angle-right"></i></a>
		</li>
	</ul>
</nav>

Copyright © Developed by DexignZone 2025