Home
Tutorials
Microsoft Technologies Tutorials
Java Programming Tutorials
Web Designing Tutorials
Script Programming Tutorials
Database Programming Tutorials
Mobile Technologies Tutorials
Other Programming Tutorials
Examples
Articles
Tools
News
Bootstrap Pagination Alignment Example
Keywords : pagination, bootstrap, bootstrap pagination, bootstrap paging, bootstrap pagination examples, bootstrap pagination alignment, bootstrap change pagination position, bootstrap paging alignment classes
Example
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Pagination Alignment Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> .bcontent { margin-top: 10px; } </style> </head> <body> <div class="container-fluid bcontent"> <h2>Bootstrap Pagination Alignment</h2> <hr /> <!--Left Aligned (Default) Pagination--> <nav> <ul class="pagination"> <li class="page-item disabled"><a class="page-link" href="#">First</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"><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="#">Last</a></li> </ul> </nav> <!--Center Aligned Pagination--> <nav> <ul class="pagination justify-content-center"> <li class="page-item disabled"><a class="page-link" href="#">First</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"><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="#">Last</a></li> </ul> </nav> <!--Right Aligned Pagination--> <nav> <ul class="pagination justify-content-end"> <li class="page-item disabled"><a class="page-link" href="#">First</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"><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="#">Last</a></li> </ul> </nav> </div> </body> </html>
Click Here to See Result
Result
Previous
Next