Pagination

Pagination to indicate Link series of related content exists across multiple pages.

• 1
• 2
• 3
• 4
• 5
• ›Next

 <Pagination className="mb-0">
              <Pagination.Item>{1}</Pagination.Item>
              <Pagination.Item>{2}</Pagination.Item>
              <Pagination.Item>{3}</Pagination.Item>
              <Pagination.Item>{4}</Pagination.Item>
              <Pagination.Item>{5}</Pagination.Item>
              <Pagination.Next />
            </Pagination>

Use .active to indicate the current page.

• Prev
• 1(current)
• 2
• 3
• 4
• Next

 <Pagination>
 <Pagination.Item>Prev</Pagination.Item>
 <Pagination.Item active>{1}</Pagination.Item>
 <Pagination.Item>{2}</Pagination.Item>
 <Pagination.Item>{3}</Pagination.Item>
 <Pagination.Item>{4}</Pagination.Item>
 <Pagination.Item>Next</Pagination.Item>
</Pagination>

Use .disabled for links that appear un-clickable.

• «First
• ‹Previous
• 2
• 3(current)
• 4
• ›Next
• »Last

 <Pagination>
 <Pagination.First />
 <Pagination.Prev />
 <Pagination.Item>{2}</Pagination.Item>
 <Pagination.Item active>{3}</Pagination.Item>
 <Pagination.Item>{4}</Pagination.Item>
 <Pagination.Next />
 <Pagination.Last />
</Pagination>

Pagination to indicate Link series of related content exists across multiple pages.

 <Row>
 <Col md={12} lg={6}>
   <Nav aria-label="Page" className='my-2'>
     <Pagination>
       <Pagination.First />
       <Pagination.Prev />
       <Pagination.Item active>{4}</Pagination.Item>
       <Pagination.Ellipsis />
       <Pagination.Item>{10}</Pagination.Item>
       <Pagination.Next />
       <Pagination.Last />
     </Pagination>
   </Nav>
 </Col>
 <Col md={6} lg={6}>
   <Nav aria-label="Page example" className='my-2'>
     <Pagination>
       <Pagination.Prev />
       <Pagination.Item >{1}</Pagination.Item>
       <Pagination.Item >{2}</Pagination.Item>
       <Pagination.Item >{3}</Pagination.Item>
       <Pagination.Next />
     </Pagination>
   </Nav>
 </Col>
</Row>

Use .pagination-lg or .pagination-sm for additional sizes.

 <Nav aria-label="Page example">

 <Pagination size="lg" >
   <Pagination.Prev />
   <Pagination.Item active >{1}</Pagination.Item>
   <Pagination.Item >{2}</Pagination.Item>
   <Pagination.Item >{3}</Pagination.Item>
   <Pagination.Next />
 </Pagination>

</Nav><br />
<Nav aria-label="Page example">


 <Pagination >
   <Pagination.Item >Prev</Pagination.Item>
   <Pagination.Item active >{1}</Pagination.Item>
   <Pagination.Item >{2}</Pagination.Item>
   <Pagination.Item >{3}</Pagination.Item>
   <Pagination.Item >{4}</Pagination.Item>
   <Pagination.Item >Next</Pagination.Item>
 </Pagination>
</Nav>

Change the alignment of pagination components with flexbox Utilities

 <Nav aria-label="Page example" className='justify-content-left'>

 <Pagination >
   <Pagination.Prev disabled />
   <Pagination.Item >{1}</Pagination.Item>
   <Pagination.Item active >{2}</Pagination.Item>
   <Pagination.Item >{3}</Pagination.Item>
   <Pagination.Next />
 </Pagination>


</Nav><br />
<Nav aria-label="Page example" className='justify-content-center'>

 <Pagination >
   <Pagination.Prev disabled />
   <Pagination.Item >{1}</Pagination.Item>
   <Pagination.Item active >{2}</Pagination.Item>
   <Pagination.Item >{3}</Pagination.Item>
   <Pagination.Next />
 </Pagination>

</Nav><br />
<Nav aria-label="Page example" className='justify-content-end'>

 <Pagination  >
   <Pagination.Prev disabled />
   <Pagination.Item >{1}</Pagination.Item>
   <Pagination.Item active >{2}</Pagination.Item>
   <Pagination.Item >{3}</Pagination.Item>
   <Pagination.Next />
 </Pagination>

</Nav>