Pagination

Default Pagination

Simple pagination inspired by Rdio, great for apps and search results.

                                                    
                                                        <nav>
                                                            <ul class="pagination">
                                                                <li class="page-item">
                                                                    <a class="page-link" href="javascript: void(0);" aria-label="Previous">
                                                                        <span aria-hidden="true">&laquo;</span>
                                                                    </a>
                                                                </li>
                                                                <li class="page-item"><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"><a class="page-link" href="javascript: void(0);">5</a></li>
                                                                <li class="page-item">
                                                                    <a class="page-link" href="javascript: void(0);" aria-label="Next">
                                                                        <span aria-hidden="true">&raquo;</span>
                                                                    </a>
                                                                </li>
                                                            </ul>
                                                        </nav>
                                                    
                                                

Disabled and active states

Pagination links are customizable for different circumstances. Use .disabled for links that appear un-clickable and .active to indicate the current page.

                                                    
                                                        <nav aria-label="...">
                                                            <ul class="pagination mb-0">
                                                                <li class="page-item disabled">
                                                                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
                                                                </li>
                                                                <li class="page-item"><a class="page-link" href="#">1</a></li>
                                                                <li class="page-item active" aria-current="page">
                                                                <a class="page-link" href="#">2</a>
                                                                </li>
                                                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                                                <li class="page-item">
                                                                <a class="page-link" href="#">Next</a>
                                                                </li>
                                                            </ul>
                                                        </nav>
                                                    
                                                

Alignment

Change the alignment of pagination components with flexbox utilities.

                                                    
                                                        <!-- Center Align -->
                                                        <nav aria-label="Page navigation example">
                                                            <ul class="pagination justify-content-center">
                                                                <li class="page-item disabled">
                                                                    <a class="page-link" href="javascript: void(0);" tabindex="-1">Previous</a>
                                                                </li>
                                                                <li class="page-item"><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);">Next</a>
                                                                </li>
                                                            </ul>
                                                        </nav>
                                                        
                                                        <!-- End Align -->
                                                        <nav aria-label="Page navigation example">
                                                            <ul class="pagination justify-content-end">
                                                                <li class="page-item disabled">
                                                                    <a class="page-link" href="javascript: void(0);" tabindex="-1">Previous</a>
                                                                </li>
                                                                <li class="page-item"><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);">Next</a>
                                                                </li>
                                                            </ul>
                                                        </nav>
                                                    
                                                

Rounded Pagination

Add .pagination-rounded for rounded pagination.

                                                    
                                                        <nav>
                                                            <ul class="pagination pagination-rounded mb-0">
                                                                <li class="page-item">
                                                                    <a class="page-link" href="javascript: void(0);" aria-label="Previous">
                                                                        <span aria-hidden="true">&laquo;</span>
                                                                    </a>
                                                                </li>
                                                                <li class="page-item"><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 active"><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"><a class="page-link" href="javascript: void(0);">5</a></li>
                                                                <li class="page-item">
                                                                    <a class="page-link" href="javascript: void(0);" aria-label="Next">
                                                                        <span aria-hidden="true">&raquo;</span>
                                                                    </a>
                                                                </li>
                                                            </ul>
                                                        </nav>
                                                    
                                                

Sizing

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

                                                    
                                                        <!-- Large -->
                                                        <nav>
                                                            <ul class="pagination pagination-lg">
                                                                <li class="page-item">
                                                                    <a class="page-link" href="javascript: void(0);" aria-label="Previous">
                                                                        <span aria-hidden="true">&laquo;</span>
                                                                    </a>
                                                                </li>
                                                                <li class="page-item"><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);" aria-label="Next">
                                                                        <span aria-hidden="true">&raquo;</span>
                                                                    </a>
                                                                </li>
                                                            </ul>
                                                        </nav>

                                                        <!-- Small -->
                                                        <nav>
                                                            <ul class="pagination pagination-sm mb-0">
                                                                <li class="page-item">
                                                                    <a class="page-link" href="javascript: void(0);" aria-label="Previous">
                                                                        <span aria-hidden="true">&laquo;</span>
                                                                    </a>
                                                                </li>
                                                                <li class="page-item"><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);" aria-label="Next">
                                                                        <span aria-hidden="true">&raquo;</span>
                                                                    </a>
                                                                </li>
                                                            </ul>
                                                        </nav>
                                                    
                                                
Settings
Color Scheme

Width

Purchase Now