Pagination

  1. Elements
  2. Pagination
Basic Pagination
<nav aria-label="Page navigation">
<Pagination as="ul" className="pagination mb-0">
<Pagination.Item as="li" disabled href="#">Previous
</Pagination.Item>
<Pagination.Item as="li" href="#">1</Pagination.Item>
<Pagination.Item as="li" href="#">2</Pagination.Item>
<Pagination.Item as="li" href="#">Next</Pagination.Item>
</Pagination>
</nav>
Pagination With Icons
 <Pagination className="pagination mb-0">
<Pagination.Item className="page-item" as="li" href="#" aria-label="Previous">
        <span aria-hidden="true"><i className="bi bi-caret-left"></i></span></Pagination.Item>
<Pagination.Item as="li" href="#">1</Pagination.Item>
<Pagination.Item as="li" href="#">2</Pagination.Item>
<Pagination.Item as="li" href="#">3</Pagination.Item>
<Pagination.Item as="li" className="page-item" href="#" aria-label="Next">
 <span aria-hidden="true"><i className="bi bi-caret-right"></i></span></Pagination.Item> 
</Pagination>
Pagination Sizing
 <nav aria-label="...">
<Pagination as="ul" className="pagination pagination-sm mb-0">
    <Pagination.Item as="li"active aria-current="page"> 1
    </Pagination.Item>
    <Pagination.Item as="li" href="#">2</Pagination.Item>
    <Pagination.Item as="li" href="#">3</Pagination.Item>
</Pagination>
</nav>
<nav aria-label="...">
<Pagination className="pagination pagination-lg mb-0">
    <Pagination.Item as="li" className=" active" aria-current="page">1
    </Pagination.Item>
    <Pagination.Item as="li" href="#">2</Pagination.Item>
    <Pagination.Item as="li" href="#">3</Pagination.Item>
</Pagination>
</nav>
Center & Right Aligned Pagination
<nav aria-label="Page navigation">
<Pagination className="justify-content-center">
    <Pagination.Item disabled>Previous
    </Pagination.Item>
    <Pagination.Item href="#">1</Pagination.Item>
    <Pagination.Item href="#">2</Pagination.Item>
    <Pagination.Item href="#">3</Pagination.Item>
    <Pagination.Item  href="#">Next
    </Pagination.Item>
</Pagination>
</nav>
<nav aria-label="Page navigation">
<Pagination className="justify-content-end mb-0">
    <Pagination.Item disabled >Previous
    </Pagination.Item>
    <Pagination.Item href="#">1</Pagination.Item>
    <Pagination.Item href="#">2</Pagination.Item>
    <Pagination.Item href="#">3</Pagination.Item>
    <Pagination.Item  href="#">Next
    </Pagination.Item>
</Pagination>
</nav>
Active and disabled states
<nav aria-label="..." className="me-3">
<Pagination className="pagination">
    <Pagination.Item disabled>Previous
    </Pagination.Item>
    <Pagination.Item  href="#">1</Pagination.Item>
    <Pagination.Item active  aria-current="page"href="#">2
    </Pagination.Item>
    <Pagination.Item  href="#">Next
    </Pagination.Item>
</Pagination>
</nav>
<nav aria-label="...">
<Pagination className="pagination">
    <Pagination.Item disabled>Previous
    </Pagination.Item>
    <Pagination.Item  href="#">1</Pagination.Item>
    <Pagination.Item active aria-current="page">2
    </Pagination.Item>
    <Pagination.Item  href="#">Next
    </Pagination.Item>
</Pagination>
</nav>
Pagination Style-1
<nav aria-label="Page navigation" className="pagination-style-1">
<Pagination className="pagination mb-0">
<Pagination.Item disabled href="#">
<i className="ri-arrow-left-s-line align-middle"></i>       
</Pagination.Item>
<Pagination.Item href="#">1</Pagination.Item>
<Pagination.Item active href="#">2</Pagination.Item>
<Pagination.Item href="#">
<i className="bi bi-three-dots"></i>
</Pagination.Item>
<Pagination.Item href="#">21</Pagination.Item>
<Pagination.Item href="#">
<i className="ri-arrow-right-s-line align-middle"></i>
</Pagination.Item>
</Pagination>
</nav>
Pagination Style-2
<nav aria-label="Page navigation" className="pagination-style-1">
<Pagination className="pagination mb-0">
<Pagination.Item disabled href="#">
<i className="ri-arrow-left-s-line align-middle"></i>       
</Pagination.Item>
<Pagination.Item href="#">1</Pagination.Item>
<Pagination.Item active href="#">2</Pagination.Item>
<Pagination.Item href="#">
<i className="bi bi-three-dots"></i>
</Pagination.Item>
<Pagination.Item href="#">21</Pagination.Item>
<Pagination.Item href="#">
<i className="ri-arrow-right-s-line align-middle"></i>
</Pagination.Item>
</Pagination>
</nav>
Pagination Style-3
<nav aria-label="Page navigation" className="pagination-style-3">
<Pagination className=" mb-0 flex-wrap">
<Pagination.Item as="li" disabled>Prev
</Pagination.Item>
<Pagination.Item as="li"  active href="#">1</Pagination.Item>
<Pagination.Item as="li"  href="#">2</Pagination.Item>
<Pagination.Item as="li"  href="#">
<i className="bi bi-three-dots"></i>        
</Pagination.Item>
<Pagination.Item as="li"  href="#">16</Pagination.Item>
<Pagination.Item as="li" className="pagination-next"
href="#">next
</Pagination.Item>
</Pagination>
</nav>
Pagination Style-4
<nav aria-label="Page navigation"className="pagination-style-4">
<Pagination className="mb-0 flex-wrap">
<Pagination.Item as="li"  disabled href="#">
 Prev
</Pagination.Item>
<Pagination.Item as="li"  active href="#">1</Pagination.Item>
<Pagination.Item as="li" href="#">2</Pagination.Item>
<Pagination.Item as="li"  href="#">
<i className="bi bi-three-dots"></i>   
</Pagination.Item>
<Pagination.Item as="li" href="#">16</Pagination.Item>
<Pagination.Item as="li" href="#">17</Pagination.Item>
<Pagination.Item as="li" className="pagination-next" href="#">
 next       
</Pagination.Item>
</Pagination></nav>