Bootstrap Pagination
Bootstrap Pagination
Bootstrap Pagination is a component in the Bootstrap framework that allows you to break content into smaller, more manageable chunks and display it on separate pages. This is useful for situations where you have a large amount of data to display, but don’t want to overwhelm the user with too much information at once.
To create a pagination component in Bootstrap, you can use the <nav> element with the class pagination, along with <ul> and <li> elements to create the page links. Here is an example:
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><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="#" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
This will create a pagination component with four page links and Previous and Next links. You can customize the appearance of the links by using additional classes, such as disabled to disable the link and active to highlight the current page.
Bootstrap also provides a number of helper classes to make it easier to create more complex pagination components. For example, you can use the pagination-lg or pagination-sm classes to create larger or smaller pagination components, respectively. You can also use the pagination-rounded class to create rounded page links.
<nav aria-label="Page navigation">
<ul class="pagination pagination-lg">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><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="#" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
This will create a pagination component with larger page links.
Overall, Bootstrap Pagination is a useful tool for breaking up large amounts of content into more manageable pieces. It is easy to customize and can be used in a variety of contexts.