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

Customize the overall color scheme, sidebar menu, etc.

##### Color Scheme

Light Mode
Dark Mode

##### Width

Fluid
Boxed

##### Left Sidebar

Default
Light
Dark
Fixed
Condensed
Scrollable
Purchase Now