• Light Version

  • Dark Version

  • RTL Version

Ericsson University
avatar
Sara Hopkins

Webdeveloper

Statistics

$545

27%

Friends

Ericsson University

Documentation

English
SpanishjapaneseFrance
Mark all as read

  • Campaign Holidayis nearly reach budget limit.

  • New admission 32in computer department.

  • 6th sem result 67%in computer department.

  • New Feedback 53for university assessment.

Mark all as read
George
ProfileSettings6InboxMessage
Need help?Sign out

Pagination

Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.

<navaria-label="Page navigation example"><ulclass="pagination"><liclass="page-item"><aclass="page-link"href="#">Previous</a></li><liclass="page-item"><aclass="page-link"href="#">1</a></li><liclass="page-item"><aclass="page-link"href="#">2</a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li><liclass="page-item"><aclass="page-link"href="#">Next</a></li></ul></nav>

Working with icons

Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with ariaattributes and the .sr-onlyutility.

<navaria-label="Page navigation example"><ulclass="pagination"><liclass="page-item"><aclass="page-link"href="#"aria-label="Previous"><spanaria-hidden="true">&laquo;</span><spanclass="sr-only">Previous</span></a></li><liclass="page-item"><aclass="page-link"href="#">1</a></li><liclass="page-item"><aclass="page-link"href="#">2</a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li><liclass="page-item"><aclass="page-link"href="#"aria-label="Next"><spanaria-hidden="true">&raquo;</span><spanclass="sr-only">Next</span></a></li></ul></nav>

Disabled and active states

<navaria-label="..."><ulclass="pagination"><liclass="page-item disabled"><aclass="page-link"href="#"tabindex="-1">Previous</a></li><liclass="page-item"><aclass="page-link"href="#">1</a></li><liclass="page-item active"><aclass="page-link"href="#">2 <spanclass="sr-only">(current)</span></a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li><liclass="page-item"><aclass="page-link"href="#">Next</a></li></ul></nav>

Alignment

Change the alignment of pagination components with flexbox utilities.

<navaria-label="Page navigation example"><ulclass="pagination justify-content-center"><liclass="page-item disabled"><aclass="page-link"href="#"tabindex="-1">Previous</a></li><liclass="page-item"><aclass="page-link"href="#">1</a></li><liclass="page-item"><aclass="page-link"href="#">2</a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li><liclass="page-item"><aclass="page-link"href="#">Next</a></li></ul></nav>
<navaria-label="Page navigation example"><ulclass="pagination justify-content-end"><liclass="page-item disabled"><aclass="page-link"href="#"tabindex="-1">Previous</a></li><liclass="page-item"><aclass="page-link"href="#">1</a></li><liclass="page-item"><aclass="page-link"href="#">2</a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li><liclass="page-item"><aclass="page-link"href="#">Next</a></li></ul></nav>