Bootstrap table pagination

Divide long tables into pages with table pagination feature. Display your data clearly by using multiple table parts styled with Material Design. Check out examples and tutorial.


Basic example

# First Name Last Name Username Username Username Username
1 Mark Otto @mdo Mark Otto @mdo
2 Jacob Thornton @fat Jacob Thornton @fat
3 Larry the Bird @twitter Larry the Bird @twitter
4 Paul Topolski @P_Topolski Paul Topolski @P_Topolski
5 Larry the Bird @twitter Larry the Bird @twitter

<div class="card card-cascade narrower mt-5">

    <!--Card image-->
    <div class="view view-cascade gradient-card-header purple-gradient narrower py-4 mx-4 mb-3 d-flex justify-content-center align-items-center">

        <h4 class="white-text font-weight-bold text-uppercase mb-0">Table name</h4>

    </div>
    <!--/Card image-->

    <div class="px-4">

        <!--Table-->
        <table class="table table-hover table-responsive-md mb-0">

            <!--Table head-->
            <thead>
                <tr>
                    <th scope="row">#</th>
                    <th class="th-lg">First Name</th>
                    <th class="th-lg">Last Name</th>
                    <th class="th-lg">Username</th>
                    <th class="th-lg">Username</th>
                    <th class="th-lg">Username</th>
                    <th class="th-lg">Username</th>
                </tr>
            </thead>
            <!--Table head-->

            <!--Table body-->
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                </tr>
                <tr>
                    <th scope="row">4</th>
                    <td>Paul</td>
                    <td>Topolski</td>
                    <td>@P_Topolski</td>
                    <td>Paul</td>
                    <td>Topolski</td>
                    <td>@P_Topolski</td>
                </tr>
                <tr>
                    <th scope="row">5</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
            <!--Table body-->
        </table>

    </div>

    <hr class="my-0">

    <!--Bottom Table UI-->
    <div class="d-flex justify-content-center">

        <!--Pagination -->
        <nav class="my-4 pt-2">
            <ul class="pagination pagination-circle pg-purple mb-0">

                <!--First-->
                <li class="page-item disabled clearfix d-none d-md-block"><a class="page-link">First</a></li>

                <!--Arrow left-->
                <li class="page-item disabled">
                    <a class="page-link" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                    <span class="sr-only">Previous</span>
                </a>
                </li>

                <!--Numbers-->
                <li class="page-item active"><a class="page-link">1</a></li>
                <li class="page-item"><a class="page-link">2</a></li>
                <li class="page-item"><a class="page-link">3</a></li>
                <li class="page-item"><a class="page-link">4</a></li>
                <li class="page-item"><a class="page-link">5</a></li>

                <!--Arrow right-->
                <li class="page-item">
                    <a class="page-link" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                    <span class="sr-only">Next</span>
                </a>
                </li>

                <!--First-->
                <li class="page-item clearfix d-none d-md-block"><a class="page-link">Last</a></li>

            </ul>
        </nav>
        <!--/Pagination -->

    </div>
    <!--Bottom Table UI-->

</div>