How to use Bootstrap pagination

| By Webner

How to use Bootstrap pagination

Steps to use Bootstrap pagination:

1. Create a simple html file.
2. Include bootstrap css and js CDN link in html file.

Example :

<!doctype html>
<html lang="en">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="">
    <title>bootstrap pagination</title>
<div class="container">

/****************Add your pagination code hare*****************\

 <!-- Optional JavaScript -->  
    <script src=""></script>
    <script src=""></script>

3. Now start pagination code:

Use pagination class with Ul html attribute, pagination class is already defined in bootstrap css file:

<ul class = "pagination">
   <li class="disabled"><a href = "#">&laquo;</a></li>
   <li class=”active”><a href = "#">1</a></li>
   <li><a href = "#">2</a></li>
   <li><a href = "#">3</a></li>
   <li><a href = "#">4</a></li>
   <li><a href = "#">5</a></li>
   <li><a href = "#">&raquo;</a></li>

Class .active use for highlight selected page.
Class. disabled use for disable previous or next buttons.

The output of the example will look something like this:

Leave a Reply

Your email address will not be published. Required fields are marked *