Salero Restaurant Admin | Pagination

Pagination

18
- Dr sultads Send you Photo
  29 July 2020 - 02:26 PM
- KG
  
  Resport created successfully
  29 July 2020 - 02:26 PM
- Reminder : Treatment Time!
  29 July 2020 - 02:26 PM
- Dr sultads Send you Photo
  29 July 2020 - 02:26 PM
- KG
  
  Resport created successfully
  29 July 2020 - 02:26 PM
- Reminder : Treatment Time!
  29 July 2020 - 02:26 PM
- Dr sultads Send you Photo
  29 July 2020 - 02:26 PM
- KG
  
  Resport created successfully
  29 July 2020 - 02:26 PM
- Reminder : Treatment Time!
  29 July 2020 - 02:26 PM
- Dr sultads Send you Photo
  29 July 2020 - 02:26 PM
- KG
  
  Resport created successfully
  29 July 2020 - 02:26 PM
- Reminder : Treatment Time!
  29 July 2020 - 02:26 PM
See all notifications
01
Hanuman Prajapati
Web Designer

Profile My Project4 Message Notification

Settings Logout

Generate annualy report by Salero

Lorem ipsum dolor sit amet

Salero Restaurant Admin © 2023 All Rights Reserved

Made with by DexignZone

Pagination

Default pagination style

1
2
3
4

1
2
3
4

1
2
3
4

<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

1
2
3
4

1
2
3
4

1
2
3
4

<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

1
2
3
4

1
2
3
4

1
2
3
4

1
2
3
4

<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

1
2
3
4

1
2
3
4

1
2
3
4

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