Show the Active State & Disabled State.

---

Active State

Active state shows what is the current page really:

• 1
• 2
• 3
• 4
• 5
• 6
• 7

Add class .active to let the user know which page he/she is on:

Example

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li class="active"><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="#">6</a></li>  

  <li><a href="#">7</a></li>

 
</ul>

 

 

Disabled State

A Bootstrap  disabled link cannot be clicked:

• 1
• 2
• 3
• 4
• 5
• 6
• 7

Add class .disabled if a link for some reason is disabled:

Example

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li class="disabled"><a href="#">4</a></li>
  <li><a href="#">5</a></li>

   <li><a href="#">6</a></li>

  <li><a href="#">7</a></li>

 
</ul>